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 2021/10/22 11:34:09 UTC

[myfaces-tobago] branch tobago-5.x updated: feat: custom elements instead of css class

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

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


The following commit(s) were added to refs/heads/tobago-5.x by this push:
     new 4d21d3d  feat: custom elements instead of css class
4d21d3d is described below

commit 4d21d3da42c7a1a7ee761923afb4a15fb4921591
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Fri Oct 22 13:33:14 2021 +0200

    feat: custom elements instead of css class
    
    issue: TOBAGO-1633
---
 .../renderkit/renderer/ButtonRenderer.java         |  2 +-
 .../renderkit/renderer/CommandRendererBase.java    |  2 +-
 .../renderkit/renderer/FigureRenderer.java         |  2 -
 .../internal/renderkit/renderer/ImageRenderer.java | 10 ++---
 .../internal/renderkit/renderer/LinkRenderer.java  |  2 +-
 .../myfaces/tobago/renderkit/css/TobagoClass.java  | 20 +++++-----
 .../tobago/renderkit/html/HtmlElements.java        |  1 +
 .../webapp/content/020-output/40-image/Image.xhtml | 27 +++++++++----
 tobago-theme/src/main/scss/_tobago.scss            | 45 +++++++---------------
 .../src/main/css/tobago.css                        | 42 ++++++++++----------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        | 42 ++++++++++----------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        | 42 ++++++++++----------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  | 42 ++++++++++----------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  | 42 ++++++++++----------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 29 files changed, 177 insertions(+), 174 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ButtonRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ButtonRenderer.java
index de2eee2..f72c398 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ButtonRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ButtonRenderer.java
@@ -36,7 +36,7 @@ import java.io.IOException;
 public class ButtonRenderer<T extends AbstractUIButton> extends CommandRendererBase<T> {
 
   @Override
-  protected TobagoClass getRendererCssClass() {
+  protected CssItem getRendererCssClass() {
     return TobagoClass.BUTTON;
   }
 
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 e079ff3..7fff8b3 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
@@ -251,7 +251,7 @@ public abstract class CommandRendererBase<T extends AbstractUICommand> extends D
     return null;
   }
 
-  abstract TobagoClass getRendererCssClass();
+  abstract CssItem getRendererCssClass();
 
   protected CssItem[] getCssItems(final FacesContext facesContext, final T command) {
     return null;
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FigureRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FigureRenderer.java
index 27df077..62cec17 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FigureRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/FigureRenderer.java
@@ -23,7 +23,6 @@ import org.apache.myfaces.tobago.component.Facets;
 import org.apache.myfaces.tobago.internal.component.AbstractUIFigure;
 import org.apache.myfaces.tobago.renderkit.RendererBase;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
-import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
 import org.apache.myfaces.tobago.util.ComponentUtils;
@@ -41,7 +40,6 @@ public class FigureRenderer<T extends AbstractUIFigure> extends RendererBase<T>
     writer.startElement(HtmlElements.FIGURE);
 
     writer.writeClassAttribute(
-        TobagoClass.FIGURE,
         BootstrapClass.FIGURE,
         component.getCustomClass());
     final String tip = component.getTip();
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ImageRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ImageRenderer.java
index c9b16aa..0726933 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ImageRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/ImageRenderer.java
@@ -26,7 +26,6 @@ import org.apache.myfaces.tobago.internal.util.HtmlRendererUtils;
 import org.apache.myfaces.tobago.renderkit.RendererBase;
 import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
 import org.apache.myfaces.tobago.renderkit.css.Icons;
-import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
 import org.apache.myfaces.tobago.webapp.TobagoResponseWriter;
@@ -59,17 +58,18 @@ public class ImageRenderer<T extends AbstractUIImage> extends RendererBase<T> {
       writer.endElement(HtmlElements.I);
     } else {
       final String alt = component.getAlt();
-      writer.startElement(HtmlElements.IMG);
+      writer.startElement(HtmlElements.TOBAGO_IMAGE);
       writer.writeIdAttribute(component.getClientId(facesContext));
       HtmlRendererUtils.writeDataAttributes(facesContext, writer, component);
-      writer.writeAttribute(HtmlAttributes.SRC, value, true);
-      writer.writeAttribute(HtmlAttributes.ALT, alt != null ? alt : "", true);
       writer.writeClassAttribute(
-          TobagoClass.IMAGE,
           disabled ? BootstrapClass.DISABLED : null,
           component.getCustomClass());
       writer.writeAttribute(HtmlAttributes.TITLE, title, true);
+      writer.startElement(HtmlElements.IMG);
+      writer.writeAttribute(HtmlAttributes.SRC, value, true);
+      writer.writeAttribute(HtmlAttributes.ALT, alt != null ? alt : "", true);
       writer.endElement(HtmlElements.IMG);
+      writer.endElement(HtmlElements.TOBAGO_IMAGE);
     }
   }
 }
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 3bc9903..6ae1d25 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
@@ -31,7 +31,7 @@ import javax.faces.context.FacesContext;
 public class LinkRenderer<T extends AbstractUILink> extends CommandRendererBase<T> {
 
   @Override
-  protected TobagoClass getRendererCssClass() {
+  protected CssItem getRendererCssClass() {
     return TobagoClass.LINK;
   }
 
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 5a09f33..493bfe3 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -28,24 +28,26 @@ public enum TobagoClass implements CssItem {
 
   ASCENDING("tobago-ascending"),
   AUTO__SPACING("tobago-auto-spacing"),
-  BADGE("tobago-badge"),
-  BAR("tobago-bar"),
+//  BADGE("tobago-badge"),
+//  BAR("tobago-bar"),
   BOX__HEADER("tobago-box-header"),
+  // tbd: can this be removed, when using <tobago-button>?
   BUTTON("tobago-button"),
-  BUTTONS("tobago-buttons"),
+//  BUTTONS("tobago-buttons"),
   COLLAPSED("tobago-collapsed"),
-  DATE("tobago-date"),
-  DATE__PICKER("tobago-date-picker"),
+//  DATE("tobago-date"),
+//  DATE__PICKER("tobago-date-picker"),
   DELETED("tobago-deleted"),
   DESCENDING("tobago-descending"),
   DISPLAY__INLINE__BLOCK("tobago-display-inline-block"),
   DROPDOWN__SUBMENU("tobago-dropdown-submenu"),
   EXPANDED("tobago-expanded"),
-  FILE("tobago-file"),
-  FIGURE("tobago-figure"),
+//  FILE("tobago-file"),
+//  FIGURE("tobago-figure"),
   FOLDER("tobago-folder"),
   HEADER("tobago-header"),
-  IMAGE("tobago-image"),
+//  IMAGE("tobago-image"),
+  // tbd: can be removed?
   IN("tobago-in"),
   INPUT__GROUP__OUTER("tobago-input-group-outer"),
   LABEL("tobago-label"),
@@ -57,7 +59,7 @@ public enum TobagoClass implements CssItem {
   NUMBER("tobago-number"),
   OBJECT("tobago-object"),
   OUT("tobago-out"),
-  PAGE("tobago-page"),
+//  PAGE("tobago-page"),
   PAGE__MENU_STORE("tobago-page-menuStore"),
   PAGE__NOSCRIPT("tobago-page-noscript"),
   PANEL("tobago-panel"),
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 9a0bda4..d3af024 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
@@ -151,6 +151,7 @@ public enum HtmlElements {
   TOBAGO_GRID_LAYOUT("tobago-grid-layout"),
   TOBAGO_LABEL("tobago-label"),
   TOBAGO_HEADER("tobago-header"),
+  TOBAGO_IMAGE("tobago-image"),
   TOBAGO_IN("tobago-in"),
   TOBAGO_LINKS("tobago-links"),
   TOBAGO_MESSAGES("tobago-messages"),
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/40-image/Image.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/40-image/Image.xhtml
index a9871a6..084e531 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/40-image/Image.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/40-image/Image.xhtml
@@ -49,13 +49,24 @@
       <tc:image id="i4" disabled="true" value="#{request.contextPath}/image/alps.png"/>
     </tc:section>
   </tc:section>
-  <tc:section label="Font Awesome">
-    <p>
-      todo doc: font awesome  not longer shipped with Tobago. But now Bootstrap Icons.
-      stil integratable... manually
-    </p>
-    <demo-highlight language="markup">&lt;tc:image id="fa" value="fa-coffee"/&gt;</demo-highlight>
-    FA: <tc:image id="fa" value="fa-coffee"/> -
-    BI: <tc:image id="bi" value="bi-emoji-smile"/>
+  <tc:section label="Using Font Icons">
+    <tc:section label="Bootstrap Icons">
+      <p>
+        Since Tobago 5
+        <tc:link link="https://icons.getbootstrap.com/" label="Bootstrap Icons" image="bi-box-arrow-up-right"/>
+        is shipped with Tobago.
+      </p>
+      <demo-highlight language="markup">&lt;tc:image id="bi" value="bi-emoji-smile"/&gt;</demo-highlight>
+      Example: <tc:image id="bi" value="bi-emoji-smile"/>
+    </tc:section>
+    <tc:section label="Font Awesome">
+      <p>
+        <tc:link link="https://fontawesome.com/" label="Font Awesome" image="bi-box-arrow-up-right"/>
+        is not longer shipped with Tobago.
+        But it is stil integratable, like in this demo. You need to add the resources manually.
+      </p>
+      <demo-highlight language="markup">&lt;tc:image id="fa" value="fa-coffee"/&gt;</demo-highlight>
+      Example: <tc:image id="fa" value="fa-coffee"/>
+    </tc:section>
   </tc:section>
 </ui:composition>
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 228494b..dab2475 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -165,14 +165,7 @@ tobago-badge {
   background-color: $secondary;
 }
 
-.tobago-badge {
-  // only for unit test
-}
-
 /* bar -------------------------------------------------------------- */
-// todo: remove CSS class
-.tobago-bar {
-}
 
 tobago-bar {
   &.navbar-light .navbar-brand > .tobago-link {
@@ -278,12 +271,10 @@ tobago-panel.tobago-collapsed {
 
 /* date -------------------------------------------------------------- */
 
-// XXX remove me
-.tobago-date {
+tobago-date {
+
   @include markupFatalErrWarnInfo();
-}
 
-tobago-date {
   display: block;
 
   input {
@@ -300,11 +291,6 @@ tobago-date {
   }
 }
 
-/* for pickers with more than one icon, e.g. date-time picker */
-.btn.tobago-date-picker > .fa:nth-child(n+2) {
-  margin-left: .3em;
-}
-
 /*
 workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
 */
@@ -359,14 +345,7 @@ tobago-dropdown {
 
 /* figure -------------------------------------------------------------- */
 
-.tobago-figure {
-}
-
 /* file -------------------------------------------------------------- */
-.tobago-file {
-}
-
-//TODO remove
 
 tobago-file {
   display: block;
@@ -505,11 +484,17 @@ tobago-header {
 
 /* image ----------------------------------------------------------- */
 
-.tobago-image {
+tobago-image.disabled {
+  filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
 }
 
-.tobago-image.disabled {
-  filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
+tobago-image {
+  display: inline-block;
+
+  > img {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 /* in ----------------------------------------------------------- */
@@ -730,7 +715,7 @@ a.tobago-messages-button, a.tobago-help-button, a.tobago-popover-button {
   padding-right: 0.4em;
 }
 
-.tobago-messages label {
+tobago-messages label {
   display: block;
 
   &:last-child {
@@ -744,7 +729,7 @@ tobago-flex-layout.tobago-messages-container > {
   }
 }
 
-.tobago-messages {
+tobago-messages {
   $alert-icon-padding-x: $alert-padding-x * .8;
   $alert-icon-width: $alert-icon-padding-x + 1rem + $alert-icon-padding-x;
 
@@ -860,10 +845,6 @@ tobago-overlay {
 
 /* page ----------------------------------------------------------- */
 
-// todo: remove
-.tobago-page {
-}
-
 tobago-page {
   display: block;
   padding-top: $tobago-page-padding-top;
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
index 8b2816f..ff81bce 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
@@ -11335,19 +11335,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+tobago-date {
+  display: block;
+}
+tobago-date-markup-fatal.border-danger:focus, tobago-date-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
 }
-.tobago-date-markup-warn.border-warning:focus {
+tobago-date-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 0, 190, 0.25);
 }
-.tobago-date-markup-info.border-info:focus {
+tobago-date-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(56, 156, 48, 0.25);
 }
-
-tobago-date {
-  display: block;
-}
 tobago-date input {
   min-width: 7em;
 }
@@ -11359,11 +11358,6 @@ tobago-date input:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
 
-/* for pickers with more than one icon, e.g. date-time picker */
-.btn.tobago-date-picker > .fa:nth-child(n+2) {
-  margin-left: 0.3em;
-}
-
 /*
 workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
 */
@@ -11519,10 +11513,18 @@ tobago-header.sticky-top {
 }
 
 /* image ----------------------------------------------------------- */
-.tobago-image.disabled {
+tobago-image.disabled {
   filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
 }
 
+tobago-image {
+  display: inline-block;
+}
+tobago-image > img {
+  width: 100%;
+  height: 100%;
+}
+
 /* in ----------------------------------------------------------- */
 tobago-in {
   display: block;
@@ -11719,10 +11721,10 @@ a.tobago-messages-button, a.tobago-help-button, a.tobago-popover-button {
   padding-right: 0.4em;
 }
 
-.tobago-messages label {
+tobago-messages label {
   display: block;
 }
-.tobago-messages label:last-child {
+tobago-messages label:last-child {
   margin-bottom: 0;
 }
 
@@ -11730,10 +11732,10 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
-.tobago-messages .alert.alert-dismissible {
+tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
-.tobago-messages .alert.alert-dismissible:before {
+tobago-messages .alert.alert-dismissible:before {
   font-family: bootstrap-icons;
   position: absolute;
   left: 0;
@@ -11742,13 +11744,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   width: 2.6rem;
   text-align: center;
 }
-.tobago-messages .alert.alert-dismissible.alert-danger:before {
+tobago-messages .alert.alert-dismissible.alert-danger:before {
   content: "\f622";
 }
-.tobago-messages .alert.alert-dismissible.alert-warning:before {
+tobago-messages .alert.alert-dismissible.alert-warning:before {
   content: "\f33a";
 }
-.tobago-messages .alert.alert-dismissible.alert-info:before {
+tobago-messages .alert.alert-dismissible.alert-info:before {
   content: "\f646";
 }
 
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
index 612a027..fbbfadd 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../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/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../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/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
index 4f72b97..871e2eb 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#ff00be;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#ffffff;--bs-gray:#777777;--bs-gray-dark:#323232;--bs-gray-100:#f8f9fa;--bs-gray-200:#d0d0d0;--bs-gray-300:#dee2e6;--bs-gray-400:#a0a0a0;--bs-gray-500:#adb5bd;--bs-gray-600:#777777;--bs-gray-700:#495057;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs-primary:#529696;-- [...]
+@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-gray-100:#f8f9fa;--bs-gray-200:#d0d0d0;--bs-gray-300:#dee2e6;--bs-gray-400:#a0a0a0;--bs-gray-500:#adb5bd;--bs-gray-600:#777777;--bs-gray-700:#495057;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs-primary:#529696;-- [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
index e695160..ae7731b 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,G [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,G [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
index 23dc429..30098db 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
@@ -11358,19 +11358,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+tobago-date {
+  display: block;
+}
+tobago-date-markup-fatal.border-danger:focus, tobago-date-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 178, 67, 0.25);
 }
-.tobago-date-markup-warn.border-warning:focus {
+tobago-date-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(178, 104, 18, 0.25);
 }
-.tobago-date-markup-info.border-info:focus {
+tobago-date-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(19, 14, 143, 0.25);
 }
-
-tobago-date {
-  display: block;
-}
 tobago-date input {
   min-width: 7em;
 }
@@ -11382,11 +11381,6 @@ tobago-date input:disabled {
   color: rgba(160, 160, 160, 0.5);
 }
 
-/* for pickers with more than one icon, e.g. date-time picker */
-.btn.tobago-date-picker > .fa:nth-child(n+2) {
-  margin-left: 0.3em;
-}
-
 /*
 workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
 */
@@ -11542,10 +11536,18 @@ tobago-header.sticky-top {
 }
 
 /* image ----------------------------------------------------------- */
-.tobago-image.disabled {
+tobago-image.disabled {
   filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
 }
 
+tobago-image {
+  display: inline-block;
+}
+tobago-image > img {
+  width: 100%;
+  height: 100%;
+}
+
 /* in ----------------------------------------------------------- */
 tobago-in {
   display: block;
@@ -11742,10 +11744,10 @@ a.tobago-messages-button, a.tobago-help-button, a.tobago-popover-button {
   padding-right: 0.4em;
 }
 
-.tobago-messages label {
+tobago-messages label {
   display: block;
 }
-.tobago-messages label:last-child {
+tobago-messages label:last-child {
   margin-bottom: 0;
 }
 
@@ -11753,10 +11755,10 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
-.tobago-messages .alert.alert-dismissible {
+tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
-.tobago-messages .alert.alert-dismissible:before {
+tobago-messages .alert.alert-dismissible:before {
   font-family: bootstrap-icons;
   position: absolute;
   left: 0;
@@ -11765,13 +11767,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   width: 2.6rem;
   text-align: center;
 }
-.tobago-messages .alert.alert-dismissible.alert-danger:before {
+tobago-messages .alert.alert-dismissible.alert-danger:before {
   content: "\f622";
 }
-.tobago-messages .alert.alert-dismissible.alert-warning:before {
+tobago-messages .alert.alert-dismissible.alert-warning:before {
   content: "\f33a";
 }
-.tobago-messages .alert.alert-dismissible.alert-info:before {
+tobago-messages .alert.alert-dismissible.alert-info:before {
   content: "\f646";
 }
 
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
index f189bc3..5e5376b 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../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/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../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/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scs [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
index 9bf906c..d8706d8 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url("../fonts/Amaranth-Regular.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url("../fonts/Amaranth-Bold.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url("../fonts/Amaranth-Italic.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url("../fonts/Amaranth-BoldItalic.otf") format( [...]
+@charset "UTF-8";@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url("../fonts/Amaranth-Regular.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url("../fonts/Amaranth-Bold.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url("../fonts/Amaranth-Italic.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url("../fonts/Amaranth-BoldItalic.otf") format( [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
index cf1342e..f6a9fed 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAEvB,mBAAxB,uBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB, [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAEvB,mBAAxB,uBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB, [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
index 9cb4505..c29bc69 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
@@ -11345,19 +11345,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+tobago-date {
+  display: block;
+}
+tobago-date-markup-fatal.border-danger:focus, tobago-date-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
-.tobago-date-markup-warn.border-warning:focus {
+tobago-date-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
 }
-.tobago-date-markup-info.border-info:focus {
+tobago-date-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
 }
-
-tobago-date {
-  display: block;
-}
 tobago-date input {
   min-width: 7em;
 }
@@ -11369,11 +11368,6 @@ tobago-date input:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
 
-/* for pickers with more than one icon, e.g. date-time picker */
-.btn.tobago-date-picker > .fa:nth-child(n+2) {
-  margin-left: 0.3em;
-}
-
 /*
 workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
 */
@@ -11529,10 +11523,18 @@ tobago-header.sticky-top {
 }
 
 /* image ----------------------------------------------------------- */
-.tobago-image.disabled {
+tobago-image.disabled {
   filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
 }
 
+tobago-image {
+  display: inline-block;
+}
+tobago-image > img {
+  width: 100%;
+  height: 100%;
+}
+
 /* in ----------------------------------------------------------- */
 tobago-in {
   display: block;
@@ -11729,10 +11731,10 @@ a.tobago-messages-button, a.tobago-help-button, a.tobago-popover-button {
   padding-right: 0.4em;
 }
 
-.tobago-messages label {
+tobago-messages label {
   display: block;
 }
-.tobago-messages label:last-child {
+tobago-messages label:last-child {
   margin-bottom: 0;
 }
 
@@ -11740,10 +11742,10 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
-.tobago-messages .alert.alert-dismissible {
+tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
-.tobago-messages .alert.alert-dismissible:before {
+tobago-messages .alert.alert-dismissible:before {
   font-family: bootstrap-icons;
   position: absolute;
   left: 0;
@@ -11752,13 +11754,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   width: 2.6rem;
   text-align: center;
 }
-.tobago-messages .alert.alert-dismissible.alert-danger:before {
+tobago-messages .alert.alert-dismissible.alert-danger:before {
   content: "\f622";
 }
-.tobago-messages .alert.alert-dismissible.alert-warning:before {
+tobago-messages .alert.alert-dismissible.alert-warning:before {
   content: "\f33a";
 }
-.tobago-messages .alert.alert-dismissible.alert-info:before {
+tobago-messages .alert.alert-dismissible.alert-info:before {
   content: "\f646";
 }
 
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
index d849d8e..09eed32 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
index 8bb9a55..81860bc 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs- [...]
+@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-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs- [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
index c8b4841..370759e 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,EAAE [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,EAAE [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
index 67f279d..6964717 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
@@ -11045,19 +11045,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+tobago-date {
+  display: block;
+}
+tobago-date-markup-fatal.border-danger:focus, tobago-date-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(211, 0, 64, 0.25);
 }
-.tobago-date-markup-warn.border-warning:focus {
+tobago-date-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(240, 173, 78, 0.25);
 }
-.tobago-date-markup-info.border-info:focus {
+tobago-date-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(91, 192, 222, 0.25);
 }
-
-tobago-date {
-  display: block;
-}
 tobago-date input {
   min-width: 7em;
 }
@@ -11069,11 +11068,6 @@ tobago-date input:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
 
-/* for pickers with more than one icon, e.g. date-time picker */
-.btn.tobago-date-picker > .fa:nth-child(n+2) {
-  margin-left: 0.3em;
-}
-
 /*
 workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
 */
@@ -11229,10 +11223,18 @@ tobago-header.sticky-top {
 }
 
 /* image ----------------------------------------------------------- */
-.tobago-image.disabled {
+tobago-image.disabled {
   filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
 }
 
+tobago-image {
+  display: inline-block;
+}
+tobago-image > img {
+  width: 100%;
+  height: 100%;
+}
+
 /* in ----------------------------------------------------------- */
 tobago-in {
   display: block;
@@ -11428,10 +11430,10 @@ a.tobago-messages-button, a.tobago-help-button, a.tobago-popover-button {
   padding-right: 0.4em;
 }
 
-.tobago-messages label {
+tobago-messages label {
   display: block;
 }
-.tobago-messages label:last-child {
+tobago-messages label:last-child {
   margin-bottom: 0;
 }
 
@@ -11439,10 +11441,10 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
-.tobago-messages .alert.alert-dismissible {
+tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
-.tobago-messages .alert.alert-dismissible:before {
+tobago-messages .alert.alert-dismissible:before {
   font-family: bootstrap-icons;
   position: absolute;
   left: 0;
@@ -11451,13 +11453,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   width: 2.6rem;
   text-align: center;
 }
-.tobago-messages .alert.alert-dismissible.alert-danger:before {
+tobago-messages .alert.alert-dismissible.alert-danger:before {
   content: "\f622";
 }
-.tobago-messages .alert.alert-dismissible.alert-warning:before {
+tobago-messages .alert.alert-dismissible.alert-warning:before {
   content: "\f33a";
 }
-.tobago-messages .alert.alert-dismissible.alert-info:before {
+tobago-messages .alert.alert-dismissible.alert-info:before {
   content: "\f646";
 }
 
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
index c80e63d..e155586 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../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","../. [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../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","../. [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
index 9adf5c1..289d3ef 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#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-gray-100:#f7f7f7;--bs-gray-200:#e3e4e5;--bs-gray-300:#d7d7d7;--bs-gray-400:#ced4da;--bs-gray-500:#acacac;--bs-gray-600:#788c94;--bs-gray-700:#55595c;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs-primary:#185722;--bs-sec [...]
+@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-gray-100:#f7f7f7;--bs-gray-200:#e3e4e5;--bs-gray-300:#d7d7d7;--bs-gray-400:#ced4da;--bs-gray-500:#acacac;--bs-gray-600:#788c94;--bs-gray-700:#55595c;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs-primary:#185722;--bs-sec [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
index e952aa6..e27221e 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,KACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,EAAE,CAAE,GAC1B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,EAAE,CA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,KACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,EAAE,CAAE,GAC1B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,EAAE,CA [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
index a461965..978d7b2 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
@@ -11315,19 +11315,18 @@ tobago-panel.tobago-collapsed {
 }
 
 /* date -------------------------------------------------------------- */
-.tobago-date-markup-fatal.border-danger:focus, .tobago-date-markup-error.border-danger:focus {
+tobago-date {
+  display: block;
+}
+tobago-date-markup-fatal.border-danger:focus, tobago-date-markup-error.border-danger:focus {
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }
-.tobago-date-markup-warn.border-warning:focus {
+tobago-date-markup-warn.border-warning:focus {
   box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
 }
-.tobago-date-markup-info.border-info:focus {
+tobago-date-markup-info.border-info:focus {
   box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
 }
-
-tobago-date {
-  display: block;
-}
 tobago-date input {
   min-width: 7em;
 }
@@ -11339,11 +11338,6 @@ tobago-date input:disabled {
   color: rgba(33, 37, 41, 0.5);
 }
 
-/* for pickers with more than one icon, e.g. date-time picker */
-.btn.tobago-date-picker > .fa:nth-child(n+2) {
-  margin-left: 0.3em;
-}
-
 /*
 workaround for Bootstrap Modal (Popup) with vanillajs-datepicker
 */
@@ -11499,10 +11493,18 @@ tobago-header.sticky-top {
 }
 
 /* image ----------------------------------------------------------- */
-.tobago-image.disabled {
+tobago-image.disabled {
   filter: grayscale(1) blur(2px) contrast(0.5) brightness(1.2);
 }
 
+tobago-image {
+  display: inline-block;
+}
+tobago-image > img {
+  width: 100%;
+  height: 100%;
+}
+
 /* in ----------------------------------------------------------- */
 tobago-in {
   display: block;
@@ -11699,10 +11701,10 @@ a.tobago-messages-button, a.tobago-help-button, a.tobago-popover-button {
   padding-right: 0.4em;
 }
 
-.tobago-messages label {
+tobago-messages label {
   display: block;
 }
-.tobago-messages label:last-child {
+tobago-messages label:last-child {
   margin-bottom: 0;
 }
 
@@ -11710,10 +11712,10 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   flex: 1 0 0px;
 }
 
-.tobago-messages .alert.alert-dismissible {
+tobago-messages .alert.alert-dismissible {
   padding-left: 2.6rem;
 }
-.tobago-messages .alert.alert-dismissible:before {
+tobago-messages .alert.alert-dismissible:before {
   font-family: bootstrap-icons;
   position: absolute;
   left: 0;
@@ -11722,13 +11724,13 @@ tobago-flex-layout.tobago-messages-container > .tobago-input-group-outer, tobago
   width: 2.6rem;
   text-align: center;
 }
-.tobago-messages .alert.alert-dismissible.alert-danger:before {
+tobago-messages .alert.alert-dismissible.alert-danger:before {
   content: "\f622";
 }
-.tobago-messages .alert.alert-dismissible.alert-warning:before {
+tobago-messages .alert.alert-dismissible.alert-warning:before {
   content: "\f33a";
 }
-.tobago-messages .alert.alert-dismissible.alert-info:before {
+tobago-messages .alert.alert-dismissible.alert-info:before {
   content: "\f646";
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
index 8d0a2f1..1b9f060 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../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/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_mo [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
index ce23141..b1bb4f6 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs- [...]
+@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-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs- [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
index a3e6953..455b21e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,EAAE,CA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAAkB,EAAE,CA [...]
\ No newline at end of file