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/11/29 12:06:04 UTC

[myfaces-tobago] branch master updated (6b260da -> b64519c)

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 6b260da  update _variables.scss with bootstrap v5.0.0-alpha3
     new ee42353  fix theme: link
     new b64519c  rebuild themes

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


Summary of changes:
 tobago-core/npm/scss/_tobago.scss                  | 208 ++++++---------------
 .../renderkit/renderer/CommandRendererBase.java    |   6 +-
 .../internal/renderkit/renderer/LinkRenderer.java  |   6 +
 .../myfaces/tobago/renderkit/css/TobagoClass.java  |   8 +
 .../resources/renderer/link/booleanInsideLink.html |   2 +-
 .../resources/renderer/link/manyInsideLink.html    |   2 +-
 .../resources/renderer/link/radioInsideLink.html   |   2 +-
 .../renderer/link/separatorInsideLink.html         |   2 +-
 .../renderer/links/link-inside-links-sub.html      |   2 +-
 .../npm/dist/css/tobago.css                        | 160 +++++-----------
 .../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                        | 160 +++++-----------
 .../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                        | 160 +++++-----------
 .../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  | 160 +++++-----------
 .../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  | 160 +++++-----------
 .../npm/dist/css/tobago.css.map                    |   2 +-
 .../npm/dist/css/tobago.min.css                    |   2 +-
 .../npm/dist/css/tobago.min.css.map                |   2 +-
 .../npm/dist/js/tobago-core.js                     |  53 ------
 .../npm/dist/js/tobago-core.js.map                 |   1 -
 31 files changed, 303 insertions(+), 819 deletions(-)
 delete mode 100644 tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js
 delete mode 100644 tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js.map


[myfaces-tobago] 02/02: 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 b64519c6566d5f805166c57b58854cbfdb07dcf9
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Fri Nov 27 22:17:12 2020 +0100

    rebuild themes
---
 .../npm/dist/css/tobago.css                        | 160 ++++++---------------
 .../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                        | 160 ++++++---------------
 .../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                        | 160 ++++++---------------
 .../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  | 160 ++++++---------------
 .../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  | 160 ++++++---------------
 .../npm/dist/css/tobago.css.map                    |   2 +-
 .../npm/dist/css/tobago.min.css                    |   2 +-
 .../npm/dist/css/tobago.min.css.map                |   2 +-
 .../npm/dist/js/tobago-core.js                     |  53 -------
 .../npm/dist/js/tobago-core.js.map                 |   1 -
 22 files changed, 225 insertions(+), 659 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 1c6e1ca..aa03a39 100644
--- a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css
@@ -10635,6 +10635,14 @@ tobago-buttons > .tobago-button {
 }
 
 /* button, link ------------------------------------------------------- */
+.tobago-button:disabled {
+  pointer-events: auto;
+}
+
+.tobago-button:disabled:hover {
+  cursor: not-allowed;
+}
+
 .tobago-button > img + span, .tobago-link > img + span {
   margin-left: .4em;
 }
@@ -10842,59 +10850,33 @@ a.tobago-link.dropdown-item img, a.tobago-link.dropdown-item span {
 }
 
 h1 button.tobago-link, .h1 button.tobago-link, h2 button.tobago-link, .h2 button.tobago-link, h3 button.tobago-link, .h3 button.tobago-link, h4 button.tobago-link, .h4 button.tobago-link, h5 button.tobago-link, .h5 button.tobago-link, h6 button.tobago-link, .h6 button.tobago-link {
+  font-size: inherit;
   font-weight: inherit;
 }
 
-button.tobago-link {
-  color: #0d6efd;
-  border-width: 0;
+button.tobago-link.btn {
   padding: 0;
-  background-color: transparent;
-  text-align: left;
-}
-
-button.tobago-link:focus, button.tobago-link:hover {
-  color: #58512e;
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
+  vertical-align: baseline;
 }
 
-button.tobago-link:disabled {
-  color: #777777;
+button.tobago-link.btn:disabled {
+  pointer-events: auto;
 }
 
-button.tobago-link:disabled:hover {
+button.tobago-link.btn:disabled:hover {
   cursor: not-allowed;
-  text-decoration: none;
 }
 
-button.tobago-link:disabled > img {
-  opacity: .65;
-}
-
-button.tobago-link.dropdown-item {
-  padding: 0.25rem 1rem;
-  color: #a0a0a0;
-  text-align: inherit;
-  white-space: nowrap;
-}
-
-button.tobago-link.dropdown-item:active {
-  color: #abf5ff;
-}
-
-button.tobago-link.dropdown-item:focus, button.tobago-link.dropdown-item:hover {
-  cursor: pointer;
-  text-decoration: none;
+button.tobago-link.btn:focus {
+  box-shadow: none;
 }
 
 button.tobago-link.dropdown-item:disabled {
-  color: #777777;
+  pointer-events: auto;
 }
 
-button.tobago-link.dropdown-toggle:focus, button.tobago-link.dropdown-toggle:hover {
-  text-decoration: none;
+button.tobago-link.dropdown-item:disabled:hover {
+  cursor: not-allowed;
 }
 
 button.nav-link {
@@ -10907,14 +10889,6 @@ button.nav-link {
   padding-right: 0;
 }
 
-span.dropdown {
-  display: inline-block;
-}
-
-.dropdown > .btn.dropdown-toggle {
-  width: 100%;
-}
-
 /* messages / help text ----------------------------------------------- */
 .tobago-messages-container {
   display: flex;
@@ -10986,11 +10960,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* nav ----------------------------------------------------------- */
-/* styles for drop down menu first level */
-.dropdown-toggle:focus, .dropdown-toggle:hover {
-  text-decoration: none;
-}
-
 /* no bottom border in navtabs, if panel-body under it */
 .nav-tabs {
   border-bottom-width: 0;
@@ -11011,70 +10980,31 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* dropdown ------------------------------------------------------- */
-tobago-dropdown {
-  display: inline-block;
+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-selected, .tobago-page-menuStore .tobago-dropdown-selected {
-  color: #1e2125;
-  text-decoration: none;
-  background-color: #f8f9fa;
-}
-
-ul > tobago-dropdown {
-  display: list-item;
-}
-
-.dropdown-menu .form-check {
-  padding-left: 0;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item {
-  padding-left: 3.5rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:before {
-  top: 0.5rem;
-  left: 1rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:after {
-  top: 0.5rem;
-  left: 1rem;
-}
-
-/* dropdown-submenu ------------------------------------------------------- */
-.tobago-dropdown-submenu {
+tobago-dropdown.tobago-dropdown-submenu {
   cursor: pointer;
   position: relative;
   width: 100%;
+  float: right;
 }
 
-.tobago-dropdown-submenu:active > button.tobago-link {
-  color: #abf5ff;
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
 }
 
-.tobago-dropdown-submenu > .dropdown-menu {
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
   top: 0;
   left: 100%;
-  margin-top: -6px;
+  margin-top: -0.5rem;
   margin-left: -1px;
-  border-radius: 6px 6px 6px 6px;
-}
-
-.tobago-dropdown-submenu > button:after {
-  display: none;
-}
-
-.tobago-dropdown-submenu > button.tobago-link {
-  color: #a0a0a0;
-}
-
-.tobago-dropdown-submenu > button.tobago-link:focus, .tobago-dropdown-submenu > button.tobago-link:hover {
-  text-decoration: none;
 }
 
-.tobago-dropdown-submenu:after {
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   content: " ";
   float: right;
   border-color: transparent;
@@ -11085,24 +11015,6 @@ ul > tobago-dropdown {
   margin-right: -10px;
 }
 
-.tobago-dropdown-submenu:hover > .dropdown-menu, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu {
-  display: block;
-}
-
-.tobago-dropdown-submenu:hover > .dropdown-menu > a:after, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu > a:after {
-  border-left-color: #000000;
-}
-
-.tobago-dropdown-submenu.pull-left {
-  float: none;
-}
-
-.tobago-dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  border-radius: 6px 0 6px 6px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -12141,6 +12053,11 @@ tobago-textarea textarea-markup-info.border-info:focus {
   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.
@@ -12182,4 +12099,11 @@ label.tobago-required:after {
 .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;
+}
 /*# 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 de3efac..abdd325 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 ead3fc9..390074d 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 31b5584..4f9d14e 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 225efca..85ecb18 100644
--- a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css
@@ -10661,6 +10661,14 @@ tobago-buttons > .tobago-button {
 }
 
 /* button, link ------------------------------------------------------- */
+.tobago-button:disabled {
+  pointer-events: auto;
+}
+
+.tobago-button:disabled:hover {
+  cursor: not-allowed;
+}
+
 .tobago-button > img + span, .tobago-link > img + span {
   margin-left: .4em;
 }
@@ -10868,59 +10876,33 @@ a.tobago-link.dropdown-item img, a.tobago-link.dropdown-item span {
 }
 
 h1 button.tobago-link, .h1 button.tobago-link, h2 button.tobago-link, .h2 button.tobago-link, h3 button.tobago-link, .h3 button.tobago-link, h4 button.tobago-link, .h4 button.tobago-link, h5 button.tobago-link, .h5 button.tobago-link, h6 button.tobago-link, .h6 button.tobago-link {
+  font-size: inherit;
   font-weight: inherit;
 }
 
-button.tobago-link {
-  color: #130E8F;
-  border-width: 0;
+button.tobago-link.btn {
   padding: 0;
-  background-color: transparent;
-  text-align: left;
-}
-
-button.tobago-link:focus, button.tobago-link:hover {
-  color: #dbb2ff;
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
+  vertical-align: baseline;
 }
 
-button.tobago-link:disabled {
-  color: #777777;
+button.tobago-link.btn:disabled {
+  pointer-events: auto;
 }
 
-button.tobago-link:disabled:hover {
+button.tobago-link.btn:disabled:hover {
   cursor: not-allowed;
-  text-decoration: none;
 }
 
-button.tobago-link:disabled > img {
-  opacity: .65;
-}
-
-button.tobago-link.dropdown-item {
-  padding: 0.25rem 1rem;
-  color: #a0a0a0;
-  text-align: inherit;
-  white-space: nowrap;
-}
-
-button.tobago-link.dropdown-item:active {
-  color: #ffb243;
-}
-
-button.tobago-link.dropdown-item:focus, button.tobago-link.dropdown-item:hover {
-  cursor: pointer;
-  text-decoration: none;
+button.tobago-link.btn:focus {
+  box-shadow: none;
 }
 
 button.tobago-link.dropdown-item:disabled {
-  color: #777777;
+  pointer-events: auto;
 }
 
-button.tobago-link.dropdown-toggle:focus, button.tobago-link.dropdown-toggle:hover {
-  text-decoration: none;
+button.tobago-link.dropdown-item:disabled:hover {
+  cursor: not-allowed;
 }
 
 button.nav-link {
@@ -10933,14 +10915,6 @@ button.nav-link {
   padding-right: 0;
 }
 
-span.dropdown {
-  display: inline-block;
-}
-
-.dropdown > .btn.dropdown-toggle {
-  width: 100%;
-}
-
 /* messages / help text ----------------------------------------------- */
 .tobago-messages-container {
   display: flex;
@@ -11012,11 +10986,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* nav ----------------------------------------------------------- */
-/* styles for drop down menu first level */
-.dropdown-toggle:focus, .dropdown-toggle:hover {
-  text-decoration: none;
-}
-
 /* no bottom border in navtabs, if panel-body under it */
 .nav-tabs {
   border-bottom-width: 0;
@@ -11037,70 +11006,31 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* dropdown ------------------------------------------------------- */
-tobago-dropdown {
-  display: inline-block;
-}
-
-tobago-dropdown .tobago-dropdown-selected, .tobago-page-menuStore .tobago-dropdown-selected {
-  color: #1e2125;
-  text-decoration: none;
-  background-color: #f8f9fa;
-}
-
-ul > tobago-dropdown {
-  display: list-item;
-}
-
-.dropdown-menu .form-check {
-  padding-left: 0;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item {
-  padding-left: 3.5rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:before {
-  top: 0.5rem;
-  left: 1rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:after {
-  top: 0.5rem;
-  left: 1rem;
+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;
 }
 
-/* dropdown-submenu ------------------------------------------------------- */
-.tobago-dropdown-submenu {
+tobago-dropdown.tobago-dropdown-submenu {
   cursor: pointer;
   position: relative;
   width: 100%;
+  float: right;
 }
 
-.tobago-dropdown-submenu:active > button.tobago-link {
-  color: #ffb243;
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
 }
 
-.tobago-dropdown-submenu > .dropdown-menu {
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
   top: 0;
   left: 100%;
-  margin-top: -6px;
+  margin-top: -0.5rem;
   margin-left: -1px;
-  border-radius: 6px 6px 6px 6px;
 }
 
-.tobago-dropdown-submenu > button:after {
-  display: none;
-}
-
-.tobago-dropdown-submenu > button.tobago-link {
-  color: #a0a0a0;
-}
-
-.tobago-dropdown-submenu > button.tobago-link:focus, .tobago-dropdown-submenu > button.tobago-link:hover {
-  text-decoration: none;
-}
-
-.tobago-dropdown-submenu:after {
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   content: " ";
   float: right;
   border-color: transparent;
@@ -11111,24 +11041,6 @@ ul > tobago-dropdown {
   margin-right: -10px;
 }
 
-.tobago-dropdown-submenu:hover > .dropdown-menu, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu {
-  display: block;
-}
-
-.tobago-dropdown-submenu:hover > .dropdown-menu > a:after, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu > a:after {
-  border-left-color: #000000;
-}
-
-.tobago-dropdown-submenu.pull-left {
-  float: none;
-}
-
-.tobago-dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  border-radius: 6px 0 6px 6px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -12167,6 +12079,11 @@ tobago-textarea textarea-markup-info.border-info:focus {
   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.
@@ -12208,4 +12125,11 @@ label.tobago-required:after {
 .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;
+}
 /*# 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 7baf5f0..389b083 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 354c52d..ab1d48c 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 64ca78d..5503676 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 63b0ef7..d177b42 100644
--- a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css
@@ -10653,6 +10653,14 @@ tobago-buttons > .tobago-button {
 }
 
 /* button, link ------------------------------------------------------- */
+.tobago-button:disabled {
+  pointer-events: auto;
+}
+
+.tobago-button:disabled:hover {
+  cursor: not-allowed;
+}
+
 .tobago-button > img + span, .tobago-link > img + span {
   margin-left: .4em;
 }
@@ -10860,59 +10868,33 @@ a.tobago-link.dropdown-item img, a.tobago-link.dropdown-item span {
 }
 
 h1 button.tobago-link, .h1 button.tobago-link, h2 button.tobago-link, .h2 button.tobago-link, h3 button.tobago-link, .h3 button.tobago-link, h4 button.tobago-link, .h4 button.tobago-link, h5 button.tobago-link, .h5 button.tobago-link, h6 button.tobago-link, .h6 button.tobago-link {
+  font-size: inherit;
   font-weight: inherit;
 }
 
-button.tobago-link {
-  color: #0d6efd;
-  border-width: 0;
+button.tobago-link.btn {
   padding: 0;
-  background-color: transparent;
-  text-align: left;
-}
-
-button.tobago-link:focus, button.tobago-link:hover {
-  color: #0a58ca;
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
+  vertical-align: baseline;
 }
 
-button.tobago-link:disabled {
-  color: #6c757d;
+button.tobago-link.btn:disabled {
+  pointer-events: auto;
 }
 
-button.tobago-link:disabled:hover {
+button.tobago-link.btn:disabled:hover {
   cursor: not-allowed;
-  text-decoration: none;
 }
 
-button.tobago-link:disabled > img {
-  opacity: .65;
-}
-
-button.tobago-link.dropdown-item {
-  padding: 0.25rem 1rem;
-  color: #212529;
-  text-align: inherit;
-  white-space: nowrap;
-}
-
-button.tobago-link.dropdown-item:active {
-  color: #fff;
-}
-
-button.tobago-link.dropdown-item:focus, button.tobago-link.dropdown-item:hover {
-  cursor: pointer;
-  text-decoration: none;
+button.tobago-link.btn:focus {
+  box-shadow: none;
 }
 
 button.tobago-link.dropdown-item:disabled {
-  color: #6c757d;
+  pointer-events: auto;
 }
 
-button.tobago-link.dropdown-toggle:focus, button.tobago-link.dropdown-toggle:hover {
-  text-decoration: none;
+button.tobago-link.dropdown-item:disabled:hover {
+  cursor: not-allowed;
 }
 
 button.nav-link {
@@ -10925,14 +10907,6 @@ button.nav-link {
   padding-right: 0;
 }
 
-span.dropdown {
-  display: inline-block;
-}
-
-.dropdown > .btn.dropdown-toggle {
-  width: 100%;
-}
-
 /* messages / help text ----------------------------------------------- */
 .tobago-messages-container {
   display: flex;
@@ -11004,11 +10978,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* nav ----------------------------------------------------------- */
-/* styles for drop down menu first level */
-.dropdown-toggle:focus, .dropdown-toggle:hover {
-  text-decoration: none;
-}
-
 /* no bottom border in navtabs, if panel-body under it */
 .nav-tabs {
   border-bottom-width: 0;
@@ -11029,70 +10998,31 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* dropdown ------------------------------------------------------- */
-tobago-dropdown {
-  display: inline-block;
-}
-
-tobago-dropdown .tobago-dropdown-selected, .tobago-page-menuStore .tobago-dropdown-selected {
-  color: #1e2125;
-  text-decoration: none;
-  background-color: #f8f9fa;
-}
-
-ul > tobago-dropdown {
-  display: list-item;
-}
-
-.dropdown-menu .form-check {
-  padding-left: 0;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item {
-  padding-left: 3.5rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:before {
-  top: 0.5rem;
-  left: 1rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:after {
-  top: 0.5rem;
-  left: 1rem;
+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;
 }
 
-/* dropdown-submenu ------------------------------------------------------- */
-.tobago-dropdown-submenu {
+tobago-dropdown.tobago-dropdown-submenu {
   cursor: pointer;
   position: relative;
   width: 100%;
+  float: right;
 }
 
-.tobago-dropdown-submenu:active > button.tobago-link {
-  color: #fff;
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
 }
 
-.tobago-dropdown-submenu > .dropdown-menu {
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
   top: 0;
   left: 100%;
-  margin-top: -6px;
+  margin-top: -0.5rem;
   margin-left: -1px;
-  border-radius: 6px 6px 6px 6px;
 }
 
-.tobago-dropdown-submenu > button:after {
-  display: none;
-}
-
-.tobago-dropdown-submenu > button.tobago-link {
-  color: #212529;
-}
-
-.tobago-dropdown-submenu > button.tobago-link:focus, .tobago-dropdown-submenu > button.tobago-link:hover {
-  text-decoration: none;
-}
-
-.tobago-dropdown-submenu:after {
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   content: " ";
   float: right;
   border-color: transparent;
@@ -11103,24 +11033,6 @@ ul > tobago-dropdown {
   margin-right: -10px;
 }
 
-.tobago-dropdown-submenu:hover > .dropdown-menu, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu {
-  display: block;
-}
-
-.tobago-dropdown-submenu:hover > .dropdown-menu > a:after, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu > a:after {
-  border-left-color: #fff;
-}
-
-.tobago-dropdown-submenu.pull-left {
-  float: none;
-}
-
-.tobago-dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  border-radius: 6px 0 6px 6px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -12159,6 +12071,11 @@ tobago-textarea textarea-markup-info.border-info:focus {
   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.
@@ -12200,4 +12117,11 @@ label.tobago-required:after {
 .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;
+}
 /*# 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 9699860..96f7126 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 aceaef5..9d71bfe 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 4947e64..ff33e32 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 ecc2862..2559d32 100644
--- a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css
@@ -10332,6 +10332,14 @@ tobago-buttons > .tobago-button {
 }
 
 /* button, link ------------------------------------------------------- */
+.tobago-button:disabled {
+  pointer-events: auto;
+}
+
+.tobago-button:disabled:hover {
+  cursor: not-allowed;
+}
+
 .tobago-button > img + span, .tobago-link > img + span {
   margin-left: .4em;
 }
@@ -10539,59 +10547,33 @@ a.tobago-link.dropdown-item img, a.tobago-link.dropdown-item span {
 }
 
 h1 button.tobago-link, .h1 button.tobago-link, h2 button.tobago-link, .h2 button.tobago-link, h3 button.tobago-link, .h3 button.tobago-link, h4 button.tobago-link, .h4 button.tobago-link, h5 button.tobago-link, .h5 button.tobago-link, h6 button.tobago-link, .h6 button.tobago-link {
+  font-size: inherit;
   font-weight: inherit;
 }
 
-button.tobago-link {
-  color: #0d6efd;
-  border-width: 0;
+button.tobago-link.btn {
   padding: 0;
-  background-color: transparent;
-  text-align: left;
-}
-
-button.tobago-link:focus, button.tobago-link:hover {
-  color: #8a5318;
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
+  vertical-align: baseline;
 }
 
-button.tobago-link:disabled {
-  color: #d7d7d7;
+button.tobago-link.btn:disabled {
+  pointer-events: auto;
 }
 
-button.tobago-link:disabled:hover {
+button.tobago-link.btn:disabled:hover {
   cursor: not-allowed;
-  text-decoration: none;
-}
-
-button.tobago-link:disabled > img {
-  opacity: .65;
 }
 
-button.tobago-link.dropdown-item {
-  padding: 0.25rem 1rem;
-  color: #212529;
-  text-align: inherit;
-  white-space: nowrap;
-}
-
-button.tobago-link.dropdown-item:active {
-  color: #fff;
-}
-
-button.tobago-link.dropdown-item:focus, button.tobago-link.dropdown-item:hover {
-  cursor: pointer;
-  text-decoration: none;
+button.tobago-link.btn:focus {
+  box-shadow: none;
 }
 
 button.tobago-link.dropdown-item:disabled {
-  color: #788c94;
+  pointer-events: auto;
 }
 
-button.tobago-link.dropdown-toggle:focus, button.tobago-link.dropdown-toggle:hover {
-  text-decoration: none;
+button.tobago-link.dropdown-item:disabled:hover {
+  cursor: not-allowed;
 }
 
 button.nav-link {
@@ -10604,14 +10586,6 @@ button.nav-link {
   padding-right: 0;
 }
 
-span.dropdown {
-  display: inline-block;
-}
-
-.dropdown > .btn.dropdown-toggle {
-  width: 100%;
-}
-
 /* messages / help text ----------------------------------------------- */
 .tobago-messages-container {
   display: flex;
@@ -10683,11 +10657,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* nav ----------------------------------------------------------- */
-/* styles for drop down menu first level */
-.dropdown-toggle:focus, .dropdown-toggle:hover {
-  text-decoration: none;
-}
-
 /* no bottom border in navtabs, if panel-body under it */
 .nav-tabs {
   border-bottom-width: 0;
@@ -10708,70 +10677,31 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* dropdown ------------------------------------------------------- */
-tobago-dropdown {
-  display: inline-block;
+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-selected, .tobago-page-menuStore .tobago-dropdown-selected {
-  color: #1e2125;
-  text-decoration: none;
-  background-color: #f7f7f7;
-}
-
-ul > tobago-dropdown {
-  display: list-item;
-}
-
-.dropdown-menu .form-check {
-  padding-left: 0;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item {
-  padding-left: 3.5rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:before {
-  top: 0.5rem;
-  left: 1rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:after {
-  top: 0.5rem;
-  left: 1rem;
-}
-
-/* dropdown-submenu ------------------------------------------------------- */
-.tobago-dropdown-submenu {
+tobago-dropdown.tobago-dropdown-submenu {
   cursor: pointer;
   position: relative;
   width: 100%;
+  float: right;
 }
 
-.tobago-dropdown-submenu:active > button.tobago-link {
-  color: #fff;
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f7f7f7;
 }
 
-.tobago-dropdown-submenu > .dropdown-menu {
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
   top: 0;
   left: 100%;
-  margin-top: -6px;
+  margin-top: -0.5rem;
   margin-left: -1px;
-  border-radius: 6px 6px 6px 6px;
 }
 
-.tobago-dropdown-submenu > button:after {
-  display: none;
-}
-
-.tobago-dropdown-submenu > button.tobago-link {
-  color: #212529;
-}
-
-.tobago-dropdown-submenu > button.tobago-link:focus, .tobago-dropdown-submenu > button.tobago-link:hover {
-  text-decoration: none;
-}
-
-.tobago-dropdown-submenu:after {
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   content: " ";
   float: right;
   border-color: transparent;
@@ -10782,24 +10712,6 @@ ul > tobago-dropdown {
   margin-right: -10px;
 }
 
-.tobago-dropdown-submenu:hover > .dropdown-menu, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu {
-  display: block;
-}
-
-.tobago-dropdown-submenu:hover > .dropdown-menu > a:after, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu > a:after {
-  border-left-color: #fff;
-}
-
-.tobago-dropdown-submenu.pull-left {
-  float: none;
-}
-
-.tobago-dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  border-radius: 6px 0 6px 6px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -11838,6 +11750,11 @@ tobago-textarea textarea-markup-info.border-info:focus {
   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.
@@ -11880,6 +11797,13 @@ label.tobago-required:after {
   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;
+}
+
 /*
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
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 178a7c9..2f0f90c 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 cced1f5..dfe4b7f 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 181ebb2..055bc6f 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 a5b3815..d3dc016 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css
@@ -10614,6 +10614,14 @@ tobago-buttons > .tobago-button {
 }
 
 /* button, link ------------------------------------------------------- */
+.tobago-button:disabled {
+  pointer-events: auto;
+}
+
+.tobago-button:disabled:hover {
+  cursor: not-allowed;
+}
+
 .tobago-button > img + span, .tobago-link > img + span {
   margin-left: .4em;
 }
@@ -10821,59 +10829,33 @@ a.tobago-link.dropdown-item img, a.tobago-link.dropdown-item span {
 }
 
 h1 button.tobago-link, .h1 button.tobago-link, h2 button.tobago-link, .h2 button.tobago-link, h3 button.tobago-link, .h3 button.tobago-link, h4 button.tobago-link, .h4 button.tobago-link, h5 button.tobago-link, .h5 button.tobago-link, h6 button.tobago-link, .h6 button.tobago-link {
+  font-size: inherit;
   font-weight: inherit;
 }
 
-button.tobago-link {
-  color: #0d6efd;
-  border-width: 0;
+button.tobago-link.btn {
   padding: 0;
-  background-color: transparent;
-  text-align: left;
-}
-
-button.tobago-link:focus, button.tobago-link:hover {
-  color: #0a58ca;
-  cursor: pointer;
-  outline: none;
-  text-decoration: underline;
+  vertical-align: baseline;
 }
 
-button.tobago-link:disabled {
-  color: #6c757d;
+button.tobago-link.btn:disabled {
+  pointer-events: auto;
 }
 
-button.tobago-link:disabled:hover {
+button.tobago-link.btn:disabled:hover {
   cursor: not-allowed;
-  text-decoration: none;
 }
 
-button.tobago-link:disabled > img {
-  opacity: .65;
-}
-
-button.tobago-link.dropdown-item {
-  padding: 0.25rem 1rem;
-  color: #212529;
-  text-align: inherit;
-  white-space: nowrap;
-}
-
-button.tobago-link.dropdown-item:active {
-  color: #fff;
-}
-
-button.tobago-link.dropdown-item:focus, button.tobago-link.dropdown-item:hover {
-  cursor: pointer;
-  text-decoration: none;
+button.tobago-link.btn:focus {
+  box-shadow: none;
 }
 
 button.tobago-link.dropdown-item:disabled {
-  color: #6c757d;
+  pointer-events: auto;
 }
 
-button.tobago-link.dropdown-toggle:focus, button.tobago-link.dropdown-toggle:hover {
-  text-decoration: none;
+button.tobago-link.dropdown-item:disabled:hover {
+  cursor: not-allowed;
 }
 
 button.nav-link {
@@ -10886,14 +10868,6 @@ button.nav-link {
   padding-right: 0;
 }
 
-span.dropdown {
-  display: inline-block;
-}
-
-.dropdown > .btn.dropdown-toggle {
-  width: 100%;
-}
-
 /* messages / help text ----------------------------------------------- */
 .tobago-messages-container {
   display: flex;
@@ -10965,11 +10939,6 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* nav ----------------------------------------------------------- */
-/* styles for drop down menu first level */
-.dropdown-toggle:focus, .dropdown-toggle:hover {
-  text-decoration: none;
-}
-
 /* no bottom border in navtabs, if panel-body under it */
 .nav-tabs {
   border-bottom-width: 0;
@@ -10990,70 +10959,31 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
 }
 
 /* dropdown ------------------------------------------------------- */
-tobago-dropdown {
-  display: inline-block;
-}
-
-tobago-dropdown .tobago-dropdown-selected, .tobago-page-menuStore .tobago-dropdown-selected {
-  color: #1e2125;
-  text-decoration: none;
-  background-color: #f8f9fa;
-}
-
-ul > tobago-dropdown {
-  display: list-item;
-}
-
-.dropdown-menu .form-check {
-  padding-left: 0;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item {
-  padding-left: 3.5rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:before {
-  top: 0.5rem;
-  left: 1rem;
-}
-
-.dropdown-menu .form-check .form-check-label.dropdown-item:after {
-  top: 0.5rem;
-  left: 1rem;
+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;
 }
 
-/* dropdown-submenu ------------------------------------------------------- */
-.tobago-dropdown-submenu {
+tobago-dropdown.tobago-dropdown-submenu {
   cursor: pointer;
   position: relative;
   width: 100%;
+  float: right;
 }
 
-.tobago-dropdown-submenu:active > button.tobago-link {
-  color: #fff;
+tobago-dropdown.tobago-dropdown-submenu:hover {
+  background-color: #f8f9fa;
 }
 
-.tobago-dropdown-submenu > .dropdown-menu {
+tobago-dropdown.tobago-dropdown-submenu:hover > .dropdown-menu {
+  display: block;
   top: 0;
   left: 100%;
-  margin-top: -6px;
+  margin-top: -0.5rem;
   margin-left: -1px;
-  border-radius: 6px 6px 6px 6px;
 }
 
-.tobago-dropdown-submenu > button:after {
-  display: none;
-}
-
-.tobago-dropdown-submenu > button.tobago-link {
-  color: #212529;
-}
-
-.tobago-dropdown-submenu > button.tobago-link:focus, .tobago-dropdown-submenu > button.tobago-link:hover {
-  text-decoration: none;
-}
-
-.tobago-dropdown-submenu:after {
+tobago-dropdown.tobago-dropdown-submenu > .dropdown-item::after {
   content: " ";
   float: right;
   border-color: transparent;
@@ -11064,24 +10994,6 @@ ul > tobago-dropdown {
   margin-right: -10px;
 }
 
-.tobago-dropdown-submenu:hover > .dropdown-menu, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu {
-  display: block;
-}
-
-.tobago-dropdown-submenu:hover > .dropdown-menu > a:after, .tobago-dropdown-submenu.tobago-dropdown-open > .dropdown-menu > a:after {
-  border-left-color: #fff;
-}
-
-.tobago-dropdown-submenu.pull-left {
-  float: none;
-}
-
-.tobago-dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  border-radius: 6px 0 6px 6px;
-}
-
 /* object ----------------------------------------------------------------- */
 /* out -------------------------------------------------------------------- */
 tobago-out {
@@ -12120,6 +12032,11 @@ tobago-textarea textarea-markup-info.border-info:focus {
   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.
@@ -12161,4 +12078,11 @@ label.tobago-required:after {
 .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;
+}
 /*# 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 4b33847..6d5e951 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 c5c3cea..e206808 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 ac93709..91e47b0 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
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js
deleted file mode 100644
index 0f43639..0000000
--- a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Listener } from "./tobago-listener";
-import { Overlay } from "./tobago-overlay";
-import { CommandHelper } from "./tobago-command";
-import { Page } from "./tobago-page";
-export class Setup {
-}
-Setup.init = function () {
-    console.time("[tobago] init");
-    document.querySelector("form").addEventListener("submit", CommandHelper.onSubmit);
-    window.addEventListener("unload", Setup.onUnload);
-    Listener.executeDocumentReady(document.documentElement);
-    console.timeEnd("[tobago] init");
-};
-Setup.onBeforeUnload = function () {
-    if (Setup.transition) {
-        new Overlay(Page.page());
-    }
-    Setup.transition = Setup.oldTransition;
-};
-/**
- * Wrapper function to call application generated onunload function
- */
-Setup.onUnload = function () {
-    console.info("on onload");
-    if (CommandHelper.isSubmit) {
-        if (Setup.transition) {
-            new Overlay(Page.page());
-        }
-        Setup.transition = Setup.oldTransition;
-    }
-    else {
-        Listener.executeBeforeExit();
-    }
-};
-document.addEventListener("DOMContentLoaded", Setup.init);
-window.addEventListener("load", Listener.executeWindowLoad);
-//# sourceMappingURL=tobago-core.js.map
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js.map b/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js.map
deleted file mode 100644
index 8abc9c0..0000000
--- a/tobago-theme/tobago-theme-standard/npm/dist/js/tobago-core.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"tobago-core.js","sourceRoot":"","sources":["../../ts/tobago-core.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,OAAO,EAAC,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AAEnC,MAAM,OAAO,KAAK;;AAKT,UAAI,GAAG;IACZ,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC9B,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAClF,MAAM,CAAC,gBAA [...]
\ No newline at end of file


[myfaces-tobago] 01/02: fix theme: link

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 ee4235376d59385b8a173d9780527427146020c6
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Fri Nov 27 22:10:15 2020 +0100

    fix theme: link
    
    * add .btn class and .btn-link class to button.tobago-link HTML component
    * fix cursor 'not-allowed' for disabled links (and buttons)
    * refactor tobago-dropdown-submenu
    * fix button.tobago-link inside titles (like h1, h2, ...)
    * cleanup
    * adjust tests
---
 tobago-core/npm/scss/_tobago.scss                  | 208 ++++++---------------
 .../renderkit/renderer/CommandRendererBase.java    |   6 +-
 .../internal/renderkit/renderer/LinkRenderer.java  |   6 +
 .../myfaces/tobago/renderkit/css/TobagoClass.java  |   8 +
 .../resources/renderer/link/booleanInsideLink.html |   2 +-
 .../resources/renderer/link/manyInsideLink.html    |   2 +-
 .../resources/renderer/link/radioInsideLink.html   |   2 +-
 .../renderer/link/separatorInsideLink.html         |   2 +-
 .../renderer/links/link-inside-links-sub.html      |   2 +-
 9 files changed, 78 insertions(+), 160 deletions(-)

diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index 09b9e50..b5a9a6a 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -40,6 +40,23 @@ $form-disabled-alpha: 0.5;
 $page-padding-top: 1rem;
 
 /* main ---------------------------------------------------------- */
+@mixin buttonLinkDisabledCursor() {
+  &:disabled {
+    pointer-events: auto;
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+}
+
+@mixin dropdownMenuFormCheckComponents() {
+  .dropdown-menu .form-check {
+    /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+    padding-left: (($dropdown-item-padding-x ) + ($form-check-padding-left / 1em))
+  }
+}
+
 @mixin linkWithoutUnderline() {
   > .tobago-link {
     text-decoration: none;
@@ -143,10 +160,11 @@ tobago-buttons {
   }
 }
 
-tobago-links {
+/* button, link ------------------------------------------------------- */
+.tobago-button {
+  @include buttonLinkDisabledCursor();
 }
 
-/* button, link ------------------------------------------------------- */
 .tobago-button, .tobago-link {
   > img + span {
     margin-left: .4em;
@@ -401,63 +419,25 @@ a.tobago-link.dropdown-item {
 
 h1, h2, h3, h4, h5, h6 {
   button.tobago-link {
+    font-size: inherit;
     font-weight: inherit;
   }
 }
 
 button {
-  &.tobago-link {
-    color: $blue;
-    border-width: 0;
-    padding: 0;
-    background-color: transparent;
-    text-align: left;
-
-    &:focus, &:hover {
-      color: $link-hover-color;
-      cursor: pointer;
-      outline: none;
-      text-decoration: underline;
-    }
+  &.tobago-link.btn {
+    @include buttonLinkDisabledCursor();
 
-    &:disabled {
-      color: $nav-link-disabled-color;
-
-      &:hover {
-        cursor: not-allowed;
-        text-decoration: none;
-      }
+    padding: 0;
+    vertical-align: baseline;
 
-      > img {
-        opacity: .65;
-      }
+    &:focus {
+      box-shadow: none;
     }
   }
 
   &.tobago-link.dropdown-item {
-    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-    color: $dropdown-link-color;
-    text-align: inherit;
-    white-space: nowrap;
-
-    &:active {
-      color: $dropdown-link-active-color;
-    }
-
-    &:focus, &:hover {
-      cursor: pointer;
-      text-decoration: none;
-    }
-
-    &:disabled {
-      color: $dropdown-link-disabled-color;
-    }
-  }
-
-  &.tobago-link.dropdown-toggle {
-    &:focus, &:hover {
-      text-decoration: none;
-    }
+    @include buttonLinkDisabledCursor();
   }
 
   &.nav-link { /* bootstrap don't know button.nav-link*/
@@ -470,12 +450,7 @@ button {
   padding-right: 0;
 }
 
-span.dropdown {
-  display: inline-block;
-}
-
-.dropdown > .btn.dropdown-toggle {
-  width: 100%;
+tobago-links {
 }
 
 /* messages / help text ----------------------------------------------- */
@@ -553,13 +528,6 @@ tobago-flex-layout.tobago-messages-container > {
 
 /* nav ----------------------------------------------------------- */
 
-/* styles for drop down menu first level */
-.dropdown-toggle {
-  &:focus, &:hover {
-    text-decoration: none;
-  }
-}
-
 /* no bottom border in navtabs, if panel-body under it */
 .nav-tabs {
   border-bottom-width: 0;
@@ -581,103 +549,35 @@ tobago-flex-layout.tobago-messages-container > {
 
 /* dropdown ------------------------------------------------------- */
 tobago-dropdown {
-  display: inline-block;
-}
-
-tobago-dropdown, .tobago-page-menuStore {
-  .tobago-dropdown-selected {
-    color: $dropdown-link-hover-color;
-    text-decoration: none;
-    @include gradient-bg($dropdown-link-hover-bg);
-  }
-}
-
-ul > tobago-dropdown {
-  display: list-item;
-}
-
-.dropdown-menu {
-  .form-check {
-    padding-left: 0;
-
-    .form-check-label.dropdown-item {
-      // todo check! this was BS4: padding-left: ($custom-control-gutter + $custom-control-indicator-size) + $dropdown-item-padding-x;
-      padding-left: ($spacer * 1.5 + $spacer) + $dropdown-item-padding-x;
-
-      &:before {
-        top: (($font-size-base * $line-height-base - $spacer) / 2) + $dropdown-item-padding-y;
-        left: $dropdown-item-padding-x;
-      }
+  @include dropdownMenuFormCheckComponents();
 
-      &:after {
-        top: (($font-size-base * $line-height-base - $spacer) / 2) + $dropdown-item-padding-y;
-        left: $dropdown-item-padding-x;
-      }
-    }
-  }
-}
-
-/* dropdown-submenu ------------------------------------------------------- */
-
-.tobago-dropdown-submenu {
-  cursor: pointer;
-  position: relative;
-  width: 100%;
-
-  &:active {
-    > button.tobago-link {
-      color: $dropdown-link-active-color;
-    }
-  }
-
-  > .dropdown-menu {
-    top: 0;
-    left: 100%;
-    margin-top: -6px;
-    margin-left: -1px;
-    border-radius: 6px 6px 6px 6px;
-  }
-
-  > button:after {
-    display: none;
-  }
-
-  > button.tobago-link {
-    color: $dropdown-link-color;
-
-    &:focus, &:hover {
-      text-decoration: none;
-    }
-  }
-
-  &:after {
-    content: " ";
+  &.tobago-dropdown-submenu {
+    cursor: pointer;
+    position: relative;
+    width: 100%;
     float: right;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 5px 0 5px 5px;
-    border-left-color: #cccccc;
-    margin-top: 7px;
-    margin-right: -10px;
-  }
 
-  &:hover, &.tobago-dropdown-open {
-    > .dropdown-menu {
-      display: block;
+    &:hover {
+      background-color: $dropdown-link-hover-bg;
 
-      > a:after {
-        border-left-color: $dropdown-bg;
+      > .dropdown-menu {
+        display: block;
+        top: 0;
+        left: 100%;
+        margin-top: -0.5rem;
+        margin-left: -1px;
       }
     }
-  }
-
-  &.pull-left {
-    float: none;
 
-    > .dropdown-menu {
-      left: -100%;
-      margin-left: 10px;
-      border-radius: 6px 0 6px 6px;
+    > .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;
     }
   }
 }
@@ -1621,6 +1521,8 @@ tobago-textarea textarea {
 /* menuStore -------------------------------------------------------- */
 
 .tobago-page-menuStore {
+  @include dropdownMenuFormCheckComponents();
+
   position: absolute;
   top: 0;
   left: 0;
@@ -1682,3 +1584,7 @@ label.tobago-required:after {
   custom styling is much more complicated. */
   margin-bottom: 1rem;
 }
+
+.tobago-dropdown-open, .tobago-dropdown-select {
+  // deprecated; must be added for test
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
index 504ef87..5dd94b6 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
@@ -115,7 +115,7 @@ public abstract class CommandRendererBase<T extends AbstractUICommand> extends D
         getRendererCssClass(),
         getRendererCssClass().createMarkup(component.getMarkup()),
         getCssItems(facesContext, component),
-        !parentOfCommands && dropdownSubmenu ? BootstrapClass.DROPDOWN_ITEM : null,
+        dropdownSubmenu ? BootstrapClass.DROPDOWN_ITEM : null,
         parentOfCommands && !dropdownSubmenu ? BootstrapClass.DROPDOWN_TOGGLE : null,
         component.getCustomClass(),
         isInside(facesContext, HtmlElements.TOBAGO_LINKS) ? BootstrapClass.NAV_LINK : null);
@@ -228,9 +228,7 @@ public abstract class CommandRendererBase<T extends AbstractUICommand> extends D
       writer.startElement(HtmlElements.TOBAGO_DROPDOWN);
       writer.writeIdAttribute(clientId);
 
-      writer.writeClassAttribute(
-          dropdownSubmenu ? TobagoClass.DROPDOWN__SUBMENU : BootstrapClass.DROPDOWN,
-          dropdownSubmenu ? BootstrapClass.DROPDOWN_ITEM : null);
+      writer.writeClassAttribute(dropdownSubmenu ? TobagoClass.DROPDOWN__SUBMENU : BootstrapClass.DROPDOWN);
     }
   }
 
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java
index bc6a83d..3bc9903 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java
@@ -24,6 +24,7 @@ import org.apache.myfaces.tobago.internal.component.AbstractUILink;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
 import org.apache.myfaces.tobago.renderkit.css.CssItem;
 import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
 
 import javax.faces.context.FacesContext;
 
@@ -36,9 +37,14 @@ public class LinkRenderer<T extends AbstractUILink> extends CommandRendererBase<
 
   @Override
   protected CssItem[] getCssItems(final FacesContext facesContext, final T command) {
+    final boolean disabled = command.isDisabled();
+    final boolean anchor = (command.getLink() != null || command.getOutcome() != null) && !disabled;
+    final boolean dropdownSubmenu = isInside(facesContext, HtmlElements.COMMAND);
     final Markup markup = command.getMarkup() != null ? command.getMarkup() : Markup.NULL;
 
     return new CssItem[]{
+        !anchor && !dropdownSubmenu ? BootstrapClass.BTN : null,
+        !anchor && !dropdownSubmenu ? BootstrapClass.BTN_LINK : null,
         BootstrapClass.textColor(markup),
         BootstrapClass.fontStyle(markup)
     };
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index 42403f3..6921a94 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -125,7 +125,15 @@ public enum TobagoClass implements CssItem {
   COLLAPSED("tobago-collapsed"),
   DATE("tobago-date"),
   DATE__PICKER("tobago-date-picker"),
+  /**
+   * @deprecated since 5.0.0
+   */
+  @Deprecated
   DROPDOWN__OPEN("tobago-dropdown-open"),
+  /**
+   * @deprecated since 5.0.0
+   */
+  @Deprecated
   DROPDOWN__SELECTED("tobago-dropdown-selected"),
   FILE("tobago-file"),
   FIGURE("tobago-figure"),
diff --git a/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html b/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html
index a1a424d..3e2a0d0 100644
--- a/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html
@@ -16,7 +16,7 @@
 -->
 
 <tobago-dropdown id='id' class='dropdown'>
-  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
   <div class='dropdown-menu' aria-labelledby='id::command' name='id'>
     <tobago-select-boolean-checkbox id='id' class='form-check dropdown-item'>
       <input class='form-check-input' type='checkbox' value='true' name='id' id='id::field'>
diff --git a/tobago-core/src/test/resources/renderer/link/manyInsideLink.html b/tobago-core/src/test/resources/renderer/link/manyInsideLink.html
index 887b42e..9601fe6 100644
--- a/tobago-core/src/test/resources/renderer/link/manyInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/manyInsideLink.html
@@ -16,7 +16,7 @@
 -->
 
 <tobago-dropdown id='id' class='dropdown'>
-  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
   <div class='dropdown-menu' aria-labelledby='id::command' name='id'>
     <tobago-select-many-checkbox>
       <div class='form-check dropdown-item'>
diff --git a/tobago-core/src/test/resources/renderer/link/radioInsideLink.html b/tobago-core/src/test/resources/renderer/link/radioInsideLink.html
index f982168..f3e71c6 100644
--- a/tobago-core/src/test/resources/renderer/link/radioInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/radioInsideLink.html
@@ -16,7 +16,7 @@
 -->
 
 <tobago-dropdown id='id' class='dropdown'>
-  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
   <div class='dropdown-menu' aria-labelledby='id::command' name='id'>
     <tobago-select-one-radio>
       <div class='form-check dropdown-item'>
diff --git a/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html b/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html
index e21ff09..43674b2 100644
--- a/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html
@@ -16,7 +16,7 @@
 -->
 
 <tobago-dropdown id='id' class='dropdown'>
-  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+  <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
   <div class='dropdown-menu' aria-labelledby='id::command' name='id'>
     <a id='link1' name='link1' href='https://www.apache.org/' class='tobago-link dropdown-item'><tobago-behavior event='click' client-id='link1' omit='omit'></tobago-behavior><span>Link 1</span></a>
     <tobago-separator id='separator' class='dropdown-divider'>
diff --git a/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html b/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html
index 294ae20..9a04122 100644
--- a/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html
+++ b/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html
@@ -21,7 +21,7 @@ CSS class nav-item has moved from "tobago-dropdown" to "li"
   <ul class='nav'>
     <li class='nav-item'>
       <tobago-dropdown id='id' class='dropdown'>
-        <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle nav-link'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>apache</span></button>
+        <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle nav-link'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>apache</span></button>
         <div class='dropdown-menu' aria-labelledby='id::command' name='id'>
           <a id='sub' name='sub' href='https://www.apache.org/' class='tobago-link dropdown-item nav-link'><tobago-behavior event='click' client-id='sub' omit='omit'></tobago-behavior><span>sub</span></a>
         </div>