You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2020/10/23 18:39:39 UTC

[myfaces-tobago] 13/13: TOBAGO-1633: Use TypeScript instead of JavaScript. new tags tobago-box and tobago-section

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

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

commit 75eb5784a11f58857dd9ce269128b2c63b0e4998
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Fri Oct 23 20:39:07 2020 +0200

    TOBAGO-1633: Use TypeScript instead of JavaScript.
    new tags tobago-box and tobago-section
---
 tobago-core/npm/scss/_tobago.scss                  | 25 +++++++++++-----------
 .../internal/renderkit/renderer/BoxRenderer.java   |  7 +++---
 .../renderkit/renderer/SectionRenderer.java        |  7 +++---
 .../myfaces/tobago/renderkit/css/TobagoClass.java  | 10 ++++++++-
 .../tobago/renderkit/html/HtmlElements.java        |  4 +++-
 .../resources/renderer/box/box-label-facet.html    |  4 ++--
 .../src/test/resources/renderer/box/box-label.html |  4 ++--
 .../src/test/resources/renderer/box/simple.html    |  4 ++--
 .../renderer/section/section-label-facet.html      |  6 +++---
 .../resources/renderer/section/section-label.html  |  6 +++---
 .../test/resources/renderer/section/simple.html    |  6 +++---
 .../30-concept/51-for-each/For_Each.test.js        |  4 ++--
 .../npm/dist/css/tobago.css                        | 20 ++++++++---------
 .../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                        | 20 ++++++++---------
 .../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                        | 20 ++++++++---------
 .../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  | 20 ++++++++---------
 .../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  | 20 ++++++++---------
 .../npm/dist/css/tobago.css.map                    |  2 +-
 .../npm/dist/css/tobago.min.css                    |  2 +-
 .../npm/dist/css/tobago.min.css.map                |  2 +-
 32 files changed, 112 insertions(+), 105 deletions(-)

diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index 7e4f0fb..0f76df0 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -96,7 +96,7 @@ tobago-behavior {
 
 /* box -------------------------------------------------------------- */
 
-.tobago-box {
+tobago-box {
   margin-bottom: $card-spacer-y;
   > .card-body {
     overflow-x: hidden;
@@ -170,8 +170,8 @@ button.tobago-button {
 
 /* collapsible -------------------------------------------------------------- */
 
-.tobago-collapsed.tobago-box .card-body,
-.tobago-collapsed.tobago-section .tobago-section-content,
+tobago-box.tobago-collapsed .card-body,
+tobago-section.tobago-collapsed .tobago-section-content,
 tobago-panel.tobago-collapsed {
   display: none;
 }
@@ -930,19 +930,18 @@ tobago-stars {
 
 /* section ----------------------------------------------------------- */
 
-/* to separate the icon from the rest of the title */
-h1, h2, h3, h4, h5, h6 {
-  > .fa:first-child, > img {
-    margin-right: 0.7em;
+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;
   }
 }
 
-.tobago-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-}
-
 /* select ----------------------------------------------------------- */
 .tobago-inputPseudo {
   //deprecated should be removed
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BoxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BoxRenderer.java
index 1d05d97..5a57257 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BoxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BoxRenderer.java
@@ -42,12 +42,11 @@ public class BoxRenderer<T extends AbstractUIBox> extends CollapsiblePanelRender
 
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
     final Markup markup = component.getMarkup();
-
-    writer.startElement(HtmlElements.DIV);
     final boolean collapsed = component.isCollapsed();
 
+    writer.startElement(HtmlElements.TOBAGO_BOX);
     writer.writeClassAttribute(
-        TobagoClass.BOX,
+        null,
         TobagoClass.BOX.createMarkup(markup),
         BootstrapClass.CARD,
         collapsed ? TobagoClass.COLLAPSED : null,
@@ -96,6 +95,6 @@ public class BoxRenderer<T extends AbstractUIBox> extends CollapsiblePanelRender
   public void encodeEndInternal(final FacesContext facesContext, final T component) throws IOException {
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
     writer.endElement(HtmlElements.DIV);
-    writer.endElement(HtmlElements.DIV);
+    writer.endElement(HtmlElements.TOBAGO_BOX);
   }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SectionRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SectionRenderer.java
index 2a55e3f..1b4a05a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SectionRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SectionRenderer.java
@@ -44,10 +44,10 @@ public class SectionRenderer<T extends AbstractUISection> extends CollapsiblePan
     final boolean collapsed = component.isCollapsed();
     final Markup markup = component.getMarkup();
 
-    writer.startElement(HtmlElements.DIV);
+    writer.startElement(HtmlElements.TOBAGO_SECTION);
     writer.writeIdAttribute(clientId);
     writer.writeClassAttribute(
-        TobagoClass.SECTION,
+        null,
         TobagoClass.SECTION.createMarkup(markup),
         collapsed ? TobagoClass.COLLAPSED : null,
         component.getCustomClass());
@@ -79,7 +79,6 @@ public class SectionRenderer<T extends AbstractUISection> extends CollapsiblePan
     }
 
     writer.startElement(HtmlElements.DIV);
-    writer.writeClassAttribute(TobagoClass.SECTION__HEADER);
     writer.startElement(tag);
 
     final String image = component.getImage();
@@ -114,6 +113,6 @@ public class SectionRenderer<T extends AbstractUISection> extends CollapsiblePan
 
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
     writer.endElement(HtmlElements.DIV);
-    writer.endElement(HtmlElements.DIV);
+    writer.endElement(HtmlElements.TOBAGO_SECTION);
   }
 }
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 67cac49..2343bb8 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
@@ -119,6 +119,11 @@ public enum TobagoClass implements CssItem {
 
   BADGE("tobago-badge"),
   BAR("tobago-bar"),
+
+  /**
+   * @deprecated since 5.0.0
+   */
+  @Deprecated
   BOX("tobago-box"),
   BOX__HEADER("tobago-box-header"),
   BUTTON("tobago-button"),
@@ -166,8 +171,11 @@ public enum TobagoClass implements CssItem {
   POPOVER__BOX("tobago-popover-box"),
   POPOVER__BUTTON("tobago-popover-button"),
   PROGRESS("tobago-progress"),
+  /**
+   * @deprecated since 5.0.0
+   */
+  @Deprecated
   SECTION("tobago-section"),
-  SECTION__HEADER("tobago-section-header"),
   SECTION__CONTENT("tobago-section-content"),
   SEGMENT_LAYOUT("tobago-segmentLayout"),
   SELECT_BOOLEAN_CHECKBOX("tobago-selectBooleanCheckbox"),
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index ddad469..8f6b271 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -137,6 +137,7 @@ public enum HtmlElements {
   TOBAGO_BAR("tobago-bar"),
   TOBAGO_BEHAVIOR("tobago-behavior"),
   TOBAGO_BUTTONS("tobago-buttons"),
+  TOBAGO_BOX("tobago-box"),
   TOBAGO_DATE("tobago-date"),
   TOBAGO_DROPDOWN("tobago-dropdown"),
   TOBAGO_FILE("tobago-file"),
@@ -152,7 +153,7 @@ public enum HtmlElements {
   TOBAGO_POPOVER("tobago-popover"),
   TOBAGO_POPUP("tobago-popup"),
   TOBAGO_RANGE("tobago-range"),
-  TOBAGO_SPLIT_LAYOUT("tobago-split-layout"),
+  TOBAGO_SECTION("tobago-section"),
   TOBAGO_SELECT_BOOLEAN_CHECKBOX("tobago-select-boolean-checkbox"),
   TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
   TOBAGO_SELECT_MANY_CHECKBOX("tobago-select-many-checkbox"),
@@ -163,6 +164,7 @@ public enum HtmlElements {
   TOBAGO_SELECT_ONE_RADIO("tobago-select-one-radio"),
   TOBAGO_SEPARATOR("tobago-separator"),
   TOBAGO_SHEET("tobago-sheet"),
+  TOBAGO_SPLIT_LAYOUT("tobago-split-layout"),
   TOBAGO_STARS("tobago-stars"),
   TOBAGO_SUGGEST("tobago-suggest"),
   TOBAGO_TAB("tobago-tab"),
diff --git a/tobago-core/src/test/resources/renderer/box/box-label-facet.html b/tobago-core/src/test/resources/renderer/box/box-label-facet.html
index 7c907a7..7f97ed6 100644
--- a/tobago-core/src/test/resources/renderer/box/box-label-facet.html
+++ b/tobago-core/src/test/resources/renderer/box/box-label-facet.html
@@ -15,11 +15,11 @@
  * limitations under the License.
 -->
 
-<div class='tobago-box card' id='id'>
+<tobago-box class='card' id='id'>
   <div class='card-header tobago-box-header'>
     <h3>label
     </h3>
   </div>
   <div class='card-body'>
   </div>
-</div>
\ No newline at end of file
+</tobago-box>
\ No newline at end of file
diff --git a/tobago-core/src/test/resources/renderer/box/box-label.html b/tobago-core/src/test/resources/renderer/box/box-label.html
index 7c907a7..7f97ed6 100644
--- a/tobago-core/src/test/resources/renderer/box/box-label.html
+++ b/tobago-core/src/test/resources/renderer/box/box-label.html
@@ -15,11 +15,11 @@
  * limitations under the License.
 -->
 
-<div class='tobago-box card' id='id'>
+<tobago-box class='card' id='id'>
   <div class='card-header tobago-box-header'>
     <h3>label
     </h3>
   </div>
   <div class='card-body'>
   </div>
-</div>
\ No newline at end of file
+</tobago-box>
\ No newline at end of file
diff --git a/tobago-core/src/test/resources/renderer/box/simple.html b/tobago-core/src/test/resources/renderer/box/simple.html
index 5453e2a..cc20d02 100644
--- a/tobago-core/src/test/resources/renderer/box/simple.html
+++ b/tobago-core/src/test/resources/renderer/box/simple.html
@@ -15,7 +15,7 @@
  * limitations under the License.
 -->
 
-<div class='tobago-box card' id='id'>
+<tobago-box class='card' id='id'>
   <div class='card-body'>
   </div>
-</div>
\ No newline at end of file
+</tobago-box>
\ No newline at end of file
diff --git a/tobago-core/src/test/resources/renderer/section/section-label-facet.html b/tobago-core/src/test/resources/renderer/section/section-label-facet.html
index fd401b7..15c2ec7 100644
--- a/tobago-core/src/test/resources/renderer/section/section-label-facet.html
+++ b/tobago-core/src/test/resources/renderer/section/section-label-facet.html
@@ -15,11 +15,11 @@
  * limitations under the License.
 -->
 
-<div id='id' class='tobago-section'>
-  <div class='tobago-section-header'>
+<tobago-section id='id'>
+  <div>
     <h1>label
     </h1>
   </div>
   <div class='tobago-section-content'>
   </div>
-</div>
\ No newline at end of file
+</tobago-section>
\ No newline at end of file
diff --git a/tobago-core/src/test/resources/renderer/section/section-label.html b/tobago-core/src/test/resources/renderer/section/section-label.html
index 20f8e13..64b8429 100644
--- a/tobago-core/src/test/resources/renderer/section/section-label.html
+++ b/tobago-core/src/test/resources/renderer/section/section-label.html
@@ -15,12 +15,12 @@
  * limitations under the License.
 -->
 
-<div id='id' class='tobago-section'>
-  <div class='tobago-section-header'>
+<tobago-section id='id'>
+  <div>
     <h1>
       <span>label</span>
     </h1>
   </div>
   <div class='tobago-section-content'>
   </div>
-</div>
\ No newline at end of file
+</tobago-section>
\ No newline at end of file
diff --git a/tobago-core/src/test/resources/renderer/section/simple.html b/tobago-core/src/test/resources/renderer/section/simple.html
index 6ba2964..52574d9 100644
--- a/tobago-core/src/test/resources/renderer/section/simple.html
+++ b/tobago-core/src/test/resources/renderer/section/simple.html
@@ -15,11 +15,11 @@
  * limitations under the License.
 -->
 
-<div id='id' class='tobago-section'>
-  <div class='tobago-section-header'>
+<tobago-section id='id'>
+  <div>
     <h1>
     </h1>
   </div>
   <div class='tobago-section-content'>
   </div>
-</div>
\ No newline at end of file
+</tobago-section>
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js
index e0cd7d0..9b31157 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js
@@ -25,8 +25,8 @@ it("Add a river and reset.", function (done) {
   let dischargeFn = querySelectorFn("#page\\:mainForm\\:add\\:inDischarge\\:\\:field");
   let addFn = querySelectorFn("#page\\:mainForm\\:add\\:buttonAdd");
   let resetFn = querySelectorFn("#page\\:mainForm\\:reset\\:buttonReset");
-  let forEachBoxesFn = querySelectorAllFn("#page\\:mainForm\\:forEach .tobago-box");
-  let uiRepeatSectionsFn = querySelectorAllFn("#page\\:mainForm\\:uiRepeat .tobago-section");
+  let forEachBoxesFn = querySelectorAllFn("#page\\:mainForm\\:forEach tobago-box");
+  let uiRepeatSectionsFn = querySelectorAllFn("#page\\:mainForm\\:uiRepeat tobago-section");
 
   let test = new JasmineTestTool(done);
   test.do(() => resetFn().dispatchEvent(new Event("click", {bubbles: true})));
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 1c7bee2..a4e2b19 100644
--- a/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/npm/dist/css/tobago.css
@@ -10270,11 +10270,11 @@ tobago-behavior {
 }
 
 /* box -------------------------------------------------------------- */
-.tobago-box {
+tobago-box {
   margin-bottom: 1rem;
 }
 
-.tobago-box > .card-body {
+tobago-box > .card-body {
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -10328,8 +10328,8 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
 }
 
 /* collapsible -------------------------------------------------------------- */
-.tobago-collapsed.tobago-box .card-body,
-.tobago-collapsed.tobago-section .tobago-section-content,
+tobago-box.tobago-collapsed .card-body,
+tobago-section.tobago-collapsed .tobago-section-content,
 tobago-panel.tobago-collapsed {
   display: none;
 }
@@ -11001,17 +11001,17 @@ tobago-stars {
 }
 
 /* section ----------------------------------------------------------- */
-/* to separate the icon from the rest of the title */
-h1 > .fa:first-child, .h1 > .fa:first-child, h1 > img, .h1 > img, h2 > .fa:first-child, .h2 > .fa:first-child, h2 > img, .h2 > img, h3 > .fa:first-child, .h3 > .fa:first-child, h3 > img, .h3 > img, h4 > .fa:first-child, .h4 > .fa:first-child, h4 > img, .h4 > img, h5 > .fa:first-child, .h5 > .fa:first-child, h5 > img, .h5 > img, h6 > .fa:first-child, .h6 > .fa:first-child, h6 > img, .h6 > img {
-  margin-right: 0.7em;
-}
-
-.tobago-section-header {
+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 {
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 4a00280..1d4c281 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 eef912a..dd21a56 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 97c65a1..a7bac69 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 f1a2be1..63d1945 100644
--- a/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/npm/dist/css/tobago.css
@@ -10296,11 +10296,11 @@ tobago-behavior {
 }
 
 /* box -------------------------------------------------------------- */
-.tobago-box {
+tobago-box {
   margin-bottom: 1rem;
 }
 
-.tobago-box > .card-body {
+tobago-box > .card-body {
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -10354,8 +10354,8 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
 }
 
 /* collapsible -------------------------------------------------------------- */
-.tobago-collapsed.tobago-box .card-body,
-.tobago-collapsed.tobago-section .tobago-section-content,
+tobago-box.tobago-collapsed .card-body,
+tobago-section.tobago-collapsed .tobago-section-content,
 tobago-panel.tobago-collapsed {
   display: none;
 }
@@ -11027,17 +11027,17 @@ tobago-stars {
 }
 
 /* section ----------------------------------------------------------- */
-/* to separate the icon from the rest of the title */
-h1 > .fa:first-child, .h1 > .fa:first-child, h1 > img, .h1 > img, h2 > .fa:first-child, .h2 > .fa:first-child, h2 > img, .h2 > img, h3 > .fa:first-child, .h3 > .fa:first-child, h3 > img, .h3 > img, h4 > .fa:first-child, .h4 > .fa:first-child, h4 > img, .h4 > img, h5 > .fa:first-child, .h5 > .fa:first-child, h5 > img, .h5 > img, h6 > .fa:first-child, .h6 > .fa:first-child, h6 > img, .h6 > img {
-  margin-right: 0.7em;
-}
-
-.tobago-section-header {
+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 {
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 7dffde8..a78280f 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 be3fc87..68c38b5 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 fe50160..6418628 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 11d69f7..23610fd 100644
--- a/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/npm/dist/css/tobago.css
@@ -10288,11 +10288,11 @@ tobago-behavior {
 }
 
 /* box -------------------------------------------------------------- */
-.tobago-box {
+tobago-box {
   margin-bottom: 1rem;
 }
 
-.tobago-box > .card-body {
+tobago-box > .card-body {
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -10346,8 +10346,8 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
 }
 
 /* collapsible -------------------------------------------------------------- */
-.tobago-collapsed.tobago-box .card-body,
-.tobago-collapsed.tobago-section .tobago-section-content,
+tobago-box.tobago-collapsed .card-body,
+tobago-section.tobago-collapsed .tobago-section-content,
 tobago-panel.tobago-collapsed {
   display: none;
 }
@@ -11019,17 +11019,17 @@ tobago-stars {
 }
 
 /* section ----------------------------------------------------------- */
-/* to separate the icon from the rest of the title */
-h1 > .fa:first-child, .h1 > .fa:first-child, h1 > img, .h1 > img, h2 > .fa:first-child, .h2 > .fa:first-child, h2 > img, .h2 > img, h3 > .fa:first-child, .h3 > .fa:first-child, h3 > img, .h3 > img, h4 > .fa:first-child, .h4 > .fa:first-child, h4 > img, .h4 > img, h5 > .fa:first-child, .h5 > .fa:first-child, h5 > img, .h5 > img, h6 > .fa:first-child, .h6 > .fa:first-child, h6 > img, .h6 > img {
-  margin-right: 0.7em;
-}
-
-.tobago-section-header {
+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 {
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 db2e0fe..436640a 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/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../ [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../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/mixins/_lists.scss","../../ [...]
\ 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 3054ca8..97340a1 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:#343a40;--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:#343a40;--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 5150e94..4f94dd2 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 7b80512..634137d 100644
--- a/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/npm/dist/css/tobago.css
@@ -9968,11 +9968,11 @@ tobago-behavior {
 }
 
 /* box -------------------------------------------------------------- */
-.tobago-box {
+tobago-box {
   margin-bottom: 1rem;
 }
 
-.tobago-box > .card-body {
+tobago-box > .card-body {
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -10026,8 +10026,8 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
 }
 
 /* collapsible -------------------------------------------------------------- */
-.tobago-collapsed.tobago-box .card-body,
-.tobago-collapsed.tobago-section .tobago-section-content,
+tobago-box.tobago-collapsed .card-body,
+tobago-section.tobago-collapsed .tobago-section-content,
 tobago-panel.tobago-collapsed {
   display: none;
 }
@@ -10699,17 +10699,17 @@ tobago-stars {
 }
 
 /* section ----------------------------------------------------------- */
-/* to separate the icon from the rest of the title */
-h1 > .fa:first-child, .h1 > .fa:first-child, h1 > img, .h1 > img, h2 > .fa:first-child, .h2 > .fa:first-child, h2 > img, .h2 > img, h3 > .fa:first-child, .h3 > .fa:first-child, h3 > img, .h3 > img, h4 > .fa:first-child, .h4 > .fa:first-child, h4 > img, .h4 > img, h5 > .fa:first-child, .h5 > .fa:first-child, h5 > img, .h5 > img, h6 > .fa:first-child, .h6 > .fa:first-child, h6 > img, .h6 > img {
-  margin-right: 0.7em;
-}
-
-.tobago-section-header {
+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 {
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 6fa754c..9b5efab 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 f7c12ed..b7ed017 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 ed2c0b1..7f09ae5 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 b16f250..808fdda 100644
--- a/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/npm/dist/css/tobago.css
@@ -10249,11 +10249,11 @@ tobago-behavior {
 }
 
 /* box -------------------------------------------------------------- */
-.tobago-box {
+tobago-box {
   margin-bottom: 1rem;
 }
 
-.tobago-box > .card-body {
+tobago-box > .card-body {
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -10307,8 +10307,8 @@ button.tobago-button:disabled img, button.tobago-button:disabled span {
 }
 
 /* collapsible -------------------------------------------------------------- */
-.tobago-collapsed.tobago-box .card-body,
-.tobago-collapsed.tobago-section .tobago-section-content,
+tobago-box.tobago-collapsed .card-body,
+tobago-section.tobago-collapsed .tobago-section-content,
 tobago-panel.tobago-collapsed {
   display: none;
 }
@@ -10980,17 +10980,17 @@ tobago-stars {
 }
 
 /* section ----------------------------------------------------------- */
-/* to separate the icon from the rest of the title */
-h1 > .fa:first-child, .h1 > .fa:first-child, h1 > img, .h1 > img, h2 > .fa:first-child, .h2 > .fa:first-child, h2 > img, .h2 > img, h3 > .fa:first-child, .h3 > .fa:first-child, h3 > img, .h3 > img, h4 > .fa:first-child, .h4 > .fa:first-child, h4 > img, .h4 > img, h5 > .fa:first-child, .h5 > .fa:first-child, h5 > img, .h5 > img, h6 > .fa:first-child, .h6 > .fa:first-child, h6 > img, .h6 > img {
-  margin-right: 0.7em;
-}
-
-.tobago-section-header {
+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 {
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 58458e8..3430cb0 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/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../ [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../../scss/tobago-theme.scss","../../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/mixins/_lists.scss","../../ [...]
\ 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 b92babc..4defc38 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:#343a40;--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:#343a40;--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 25aa91a..a195c72 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