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:47 UTC

[myfaces-tobago] branch master updated (7c62812 -> 1dd861a)

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

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


    from 7c62812  add unversioned demo files
     new b3c3695  cleanup tobago.scss
     new 103d77d  cleanup tobago.scss
     new 6d7d385  cleanup tobago.scss
     new 1dd861a  rebuild themes

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


Summary of changes:
 tobago-core/npm/scss/_tobago.scss                  | 364 ++++++++++-----------
 .../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 +-
 21 files changed, 946 insertions(+), 898 deletions(-)


[myfaces-tobago] 02/04: cleanup tobago.scss

Posted by bo...@apache.org.
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 103d77d94000d959ca90ce5d4b3c19faaab90d88
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Tue Dec 1 14:43:15 2020 +0100

    cleanup tobago.scss
    
    * add mixin for tobago-button/tobago-link spacing between image and text
---
 tobago-core/npm/scss/_tobago.scss | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index d3aa5e3..2c0effd 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -50,6 +50,15 @@ $page-padding-top: 1rem;
   }
 }
 
+@mixin buttonLinkImageTextSpacing() {
+  > img + span {
+    margin-left: .4em;
+  }
+  > i + span {
+    margin-left: .4em;
+  }
+}
+
 @mixin dropdownMenuFormCheckComponents() {
   .dropdown-menu .form-check {
     /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
@@ -165,16 +174,7 @@ tobago-buttons {
 /* button, link ------------------------------------------------------- */
 .tobago-button {
   @include buttonLinkDisabledCursor();
-}
-
-.tobago-button, .tobago-link {
-  > img + span {
-    margin-left: .4em;
-  }
-
-  > i + span {
-    margin-left: .4em;
-  }
+  @include buttonLinkImageTextSpacing();
 }
 
 /* button -------------------------------------------------------------- */
@@ -404,6 +404,7 @@ tobago-in {
 /* link ----------------------------------------------------------- */
 
 .tobago-link {
+  @include buttonLinkImageTextSpacing();
   white-space: nowrap;
 
   span {


[myfaces-tobago] 01/04: cleanup tobago.scss

Posted by bo...@apache.org.
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 b3c3695fea1b13d4dc795e19d46722bb83beac1e
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Tue Dec 1 14:39:59 2020 +0100

    cleanup tobago.scss
    
    * use code formatter
---
 tobago-core/npm/scss/_tobago.scss | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index b5a9a6a..d3aa5e3 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -103,6 +103,7 @@ tobago-bar {
       text-decoration: none;
     }
   }
+
   &.navbar-dark .navbar-brand > .tobago-link {
     color: $navbar-dark-active-color;
 
@@ -126,6 +127,7 @@ tobago-behavior {
 
 tobago-box {
   margin-bottom: $card-spacer-y;
+
   > .card-body {
     overflow-x: hidden;
     overflow-y: auto;
@@ -169,6 +171,7 @@ tobago-buttons {
   > img + span {
     margin-left: .4em;
   }
+
   > i + span {
     margin-left: .4em;
   }
@@ -246,7 +249,10 @@ workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
 }
 
 /* file -------------------------------------------------------------- */
-.tobago-file {} //TODO remove
+.tobago-file {
+}
+
+//TODO remove
 
 tobago-file {
   display: block;
@@ -374,6 +380,7 @@ tobago-header {
 tobago-in {
   display: block;
 }
+
 .tobago-in {
   &:disabled {
     color: rgba($input-color, $form-disabled-alpha);
@@ -512,9 +519,11 @@ tobago-flex-layout.tobago-messages-container > {
     &.alert-danger:before {
       content: $fa-times-circle;
     }
+
     &.alert-warning:before {
       content: $fa-exclamation-triangle;
     }
+
     &.alert-info:before {
       content: $fa-info;
     }
@@ -612,7 +621,7 @@ span.tobago-out:empty:before {
 
 .table-dark .form-control-plaintext {
   color: $white;
-// was in bs4: color: $table-dark-color;
+  // was in bs4: color: $table-dark-color;
 }
 
 /* page ----------------------------------------------------------- */
@@ -743,6 +752,7 @@ tobago-stars {
       left: 0;
       top: 0;
     }
+
     .tobago-stars-slider:focus ~ .tobago-stars-focusBox {
       box-shadow: $input-box-shadow, $input-focus-box-shadow;
     }
@@ -780,9 +790,11 @@ tobago-stars {
         content: "\f005 \f005 \f005 \f005 \f005";
       }
     }
+
     .tobago-stars-slider:disabled ~ .tobago-stars-selected {
       filter: grayscale(1);
     }
+
     .tobago-stars-selected.tobago-placeholder {
       filter: grayscale(0.3);
     }
@@ -800,6 +812,7 @@ tobago-stars {
         content: "\f005 \f005 \f005 \f005 \f005";
       }
     }
+
     input[type="range"]:disabled ~ .tobago-stars-unselected {
       filter: grayscale(1);
     }
@@ -845,6 +858,7 @@ tobago-section > div > {
       /* to separate the icon from the rest of the title */
       margin-right: 0.7em;
     }
+
     display: flex;
     justify-content: space-between;
     align-content: center;
@@ -895,6 +909,7 @@ tobago-select-one-choice {
 //xxx remove me
 .tobago-selectOneListbox {
 }
+
 //xxx remove me
 .tobago-selectOneListbox-option {
 }
@@ -934,6 +949,7 @@ tobago-select-many-checkbox {
 tobago-select-many-listbox {
 
 }
+
 .tobago-selectManyListbox,
 .tobago-selectManyListbox-option {
 }
@@ -1365,6 +1381,7 @@ tobago-tab {
       color: $nav-tabs-link-active-color;
       cursor: pointer;
     }
+
     &:not(.active) {
       color: $link-color;
       cursor: pointer;
@@ -1373,6 +1390,7 @@ tobago-tab {
         color: $link-hover-color;
       }
     }
+
     &.disabled {
       color: $nav-link-disabled-color;
       cursor: not-allowed;
@@ -1400,6 +1418,7 @@ tobago-tab.tobago-tab-barFacet {
     & > button {
       height: 100%;
     }
+
     & > a {
       display: inline-block;
       padding-top: 0.5rem;
@@ -1498,7 +1517,7 @@ tobago-textarea textarea {
 .tobago-date,
 .tobago-in,
 .tobago-selectManyListbox,
-//.tobago-selectOneChoice, XXX
+  //.tobago-selectOneChoice, XXX
 .tobago-selectOneListbox,
 tobago-textarea textarea {
   &-markup-fatal, &-markup-error {
@@ -1506,11 +1525,13 @@ tobago-textarea textarea {
       box-shadow: 0 0 0 .2rem rgba($danger, .25);
     }
   }
+
   &-markup-warn {
     &.border-warning:focus {
       box-shadow: 0 0 0 .2rem rgba($warning, .25);
     }
   }
+
   &-markup-info {
     &.border-info:focus {
       box-shadow: 0 0 0 .2rem rgba($info, .25);


[myfaces-tobago] 04/04: rebuild themes

Posted by bo...@apache.org.
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


[myfaces-tobago] 03/04: cleanup tobago.scss

Posted by bo...@apache.org.
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 6d7d385c11ef726f7d9cfe372024650928ca8f6c
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Tue Dec 1 16:23:08 2020 +0100

    cleanup tobago.scss
    
    * rearrange web component tags in alphabetical order
    * put mixin at the top
    * create mixin markupFatalErrWarnInfo()
    * delete CSS for .form-horizontal: .form-horizontal is already removed from BootstrapClass.java
    * .tobago-text-justify is only used in flowLayout
---
 tobago-core/npm/scss/_tobago.scss | 326 +++++++++++++++++---------------------
 1 file changed, 146 insertions(+), 180 deletions(-)

diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index 2c0effd..9a8fc9a 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -40,6 +40,18 @@ $form-disabled-alpha: 0.5;
 $page-padding-top: 1rem;
 
 /* main ---------------------------------------------------------- */
+@mixin adjustCustomControlLabel() {
+  .form-check-label {
+    &:after {
+      content: "";
+    }
+
+    img {
+      padding-right: 0.3em;
+    }
+  }
+}
+
 @mixin buttonLinkDisabledCursor() {
   &:disabled {
     pointer-events: auto;
@@ -66,12 +78,37 @@ $page-padding-top: 1rem;
   }
 }
 
+@mixin inlinePadding() {
+  padding-top: calc(#{$input-padding-y} + #{$input-border-width});
+  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
+}
+
 @mixin linkWithoutUnderline() {
   > .tobago-link {
     text-decoration: none;
   }
 }
 
+@mixin markupFatalErrWarnInfo() {
+  &-markup-fatal, &-markup-error {
+    &.border-danger:focus {
+      box-shadow: 0 0 0 .2rem rgba($danger, .25);
+    }
+  }
+
+  &-markup-warn {
+    &.border-warning:focus {
+      box-shadow: 0 0 0 .2rem rgba($warning, .25);
+    }
+  }
+
+  &-markup-info {
+    &.border-info:focus {
+      box-shadow: 0 0 0 .2rem rgba($info, .25);
+    }
+  }
+}
+
 @mixin tobagoTreeNodeToggle() {
   .tobago-treeNode-toggle:not(.invisible) {
     cursor: pointer;
@@ -161,16 +198,6 @@ tobago-box {
   }
 }
 
-/* buttons, links ------------------------------------------------------- */
-.tobago-buttons {
-}
-
-tobago-buttons {
-  > .tobago-button {
-    display: inline-block;
-  }
-}
-
 /* button, link ------------------------------------------------------- */
 .tobago-button {
   @include buttonLinkDisabledCursor();
@@ -200,6 +227,15 @@ button.tobago-button {
   }
 }
 
+.tobago-buttons {
+}
+
+tobago-buttons {
+  > .tobago-button {
+    display: inline-block;
+  }
+}
+
 /* collapsible -------------------------------------------------------------- */
 
 tobago-box.tobago-collapsed .card-body,
@@ -212,6 +248,7 @@ tobago-panel.tobago-collapsed {
 
 // XXX remove me
 .tobago-date {
+  @include markupFatalErrWarnInfo();
 }
 
 tobago-date {
@@ -243,6 +280,45 @@ workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
   z-index: 2000 !important;
 }
 
+/* dropdown ------------------------------------------------------- */
+tobago-dropdown {
+  @include dropdownMenuFormCheckComponents();
+
+  &.tobago-dropdown-submenu {
+    cursor: pointer;
+    position: relative;
+    width: 100%;
+    float: right;
+
+    &:hover {
+      background-color: $dropdown-link-hover-bg;
+
+      > .dropdown-menu {
+        display: block;
+        top: 0;
+        left: 100%;
+        margin-top: -0.5rem;
+        margin-left: -1px;
+      }
+    }
+
+    > .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;
+    }
+  }
+}
+
+.tobago-dropdown-open, .tobago-dropdown-select {
+  // deprecated; must be added for test
+}
+
 /* figure -------------------------------------------------------------- */
 
 .tobago-figure {
@@ -301,6 +377,10 @@ tobago-flex-layout {
 
 /* flowLayout ---------------------------------------------------------- */
 tobago-flow-layout {
+  &.tobago-text-justify {
+    /* added here, because Bootstrap has removed .text-justify */
+    text-align: justify !important;
+  }
 }
 
 /* focus --------------------------------------------------------------- */
@@ -382,6 +462,8 @@ tobago-in {
 }
 
 .tobago-in {
+  @include markupFatalErrWarnInfo();
+
   &:disabled {
     color: rgba($input-color, $form-disabled-alpha);
   }
@@ -401,6 +483,9 @@ tobago-in {
   color: #6610f2 !important;
 }
 
+tobago-links {
+}
+
 /* link ----------------------------------------------------------- */
 
 .tobago-link {
@@ -458,9 +543,6 @@ button {
   padding-right: 0;
 }
 
-tobago-links {
-}
-
 /* messages / help text ----------------------------------------------- */
 .tobago-messages-container {
   display: flex;
@@ -500,6 +582,13 @@ tobago-flex-layout.tobago-messages-container > {
   }
 }
 
+.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-icon-padding-x: $alert-padding-x / 1.25;
   $alert-icon-width: $alert-icon-padding-x + 1rem + $alert-icon-padding-x;
@@ -557,41 +646,6 @@ tobago-flex-layout.tobago-messages-container > {
   display: block;
 }
 
-/* dropdown ------------------------------------------------------- */
-tobago-dropdown {
-  @include dropdownMenuFormCheckComponents();
-
-  &.tobago-dropdown-submenu {
-    cursor: pointer;
-    position: relative;
-    width: 100%;
-    float: right;
-
-    &:hover {
-      background-color: $dropdown-link-hover-bg;
-
-      > .dropdown-menu {
-        display: block;
-        top: 0;
-        left: 100%;
-        margin-top: -0.5rem;
-        margin-left: -1px;
-      }
-    }
-
-    > .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 ----------------------------------------------------------------- */
 .tobago-object {
 }
@@ -698,6 +752,18 @@ tobago-page {
   }
 }
 
+/* menuStore -------------------------------------------------------- */
+.tobago-page-menuStore {
+  @include dropdownMenuFormCheckComponents();
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: $zindex-popover;
+}
+
 /* panel ------------------------------------------------------------- */
 
 // todo: remove
@@ -728,6 +794,26 @@ tobago-progress {
 tobago-range {
 }
 
+.tobago-required label:after,
+label.tobago-required:after {
+  content: "*";
+  color: $danger;
+}
+
+/* section ----------------------------------------------------------- */
+tobago-section > div > {
+  h1, h2, h3, h4, h5, h6 {
+    > .fa:first-child, > img {
+      /* to separate the icon from the rest of the title */
+      margin-right: 0.7em;
+    }
+
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+  }
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
@@ -851,43 +937,11 @@ tobago-stars {
   }
 }
 
-/* section ----------------------------------------------------------- */
-
-tobago-section > div > {
-  h1, h2, h3, h4, h5, h6 {
-    > .fa:first-child, > img {
-      /* to separate the icon from the rest of the title */
-      margin-right: 0.7em;
-    }
-
-    display: flex;
-    justify-content: space-between;
-    align-content: center;
-  }
-}
-
 /* select ----------------------------------------------------------- */
 .tobago-inputPseudo {
   //deprecated should be removed
 }
 
-@mixin adjustCustomControlLabel() {
-  .form-check-label {
-    &:after {
-      content: "";
-    }
-
-    img {
-      padding-right: 0.3em;
-    }
-  }
-}
-
-@mixin inlinePadding() {
-  padding-top: calc(#{$input-padding-y} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
-}
-
 /* selectBooleanCheckbox ---------------------------------------------------- */
 tobago-select-boolean-checkbox {
   display: block;
@@ -909,6 +963,7 @@ tobago-select-one-choice {
 
 //xxx remove me
 .tobago-selectOneListbox {
+  @include markupFatalErrWarnInfo();
 }
 
 //xxx remove me
@@ -955,6 +1010,10 @@ tobago-select-many-listbox {
 .tobago-selectManyListbox-option {
 }
 
+.tobago-selectManyListbox {
+  @include markupFatalErrWarnInfo();
+}
+
 /* selectManyShuttle ----------------------------------------------------------- */
 tobago-select-many-shuttle {
   display: block;
@@ -1442,6 +1501,11 @@ tobago-tab-group {
   margin-bottom: $spacer;
 }
 
+/* FIXME: This is to hide the toolbar, until it is implemented */
+.tobago-tabGroup-toolBar {
+  display: none;
+}
+
 /* tree ---------------------------------------------------------------------- */
 .tobago-tree-expanded,
 .tobago-tree-selected,
@@ -1506,107 +1570,9 @@ tobago-tree-listbox, .tobago-treeListbox {
 
 /* textarea --------------------------------------------------------- */
 tobago-textarea textarea {
+  @include markupFatalErrWarnInfo();
+
   &:disabled {
     color: rgba($input-color, $form-disabled-alpha);
   }
 }
-
-/* facesMessages messageLayout focus shadows ------------------------ */
-
-// todo: check class vs. custom element
-
-.tobago-date,
-.tobago-in,
-.tobago-selectManyListbox,
-  //.tobago-selectOneChoice, XXX
-.tobago-selectOneListbox,
-tobago-textarea textarea {
-  &-markup-fatal, &-markup-error {
-    &.border-danger:focus {
-      box-shadow: 0 0 0 .2rem rgba($danger, .25);
-    }
-  }
-
-  &-markup-warn {
-    &.border-warning:focus {
-      box-shadow: 0 0 0 .2rem rgba($warning, .25);
-    }
-  }
-
-  &-markup-info {
-    &.border-info:focus {
-      box-shadow: 0 0 0 .2rem rgba($info, .25);
-    }
-  }
-}
-
-/* menuStore -------------------------------------------------------- */
-
-.tobago-page-menuStore {
-  @include dropdownMenuFormCheckComponents();
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  z-index: $zindex-popover;
-}
-
-/* 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 */
-  }
-
-  .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: $danger;
-}
-
-/* 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-dropdown-open, .tobago-dropdown-select {
-  // deprecated; must be added for test
-}