You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/04/08 18:53:59 UTC

[royale-asjs] branch develop updated: jewel-themes: update all themes with numericstepper changes in button styles

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

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new cb91c3e  jewel-themes: update all themes with numericstepper changes in button styles
cb91c3e is described below

commit cb91c3e652c0f509cb30218e51ecf72339ec6733
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Apr 8 20:53:54 2020 +0200

    jewel-themes: update all themes with numericstepper changes in button styles
---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 .../src/main/resources/defaults.css                | 31 +++++++++++++++++++---
 36 files changed, 1008 insertions(+), 108 deletions(-)

diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 1414cd9..6663055 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 9c5a577..2e237ef 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index cc8130c..4d4dc37 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index af01c8d..e5d31a6 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 18dbf01..e3f03a6 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 90771a7..14e560e 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index de6c4df..8436d64 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 3b1dd9f..1e16d54 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 7f2f77a..371209a 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index aa86129..5cc8e00 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index bccb43b..f6858bd 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 91a2bbe..e1f1405 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #333333;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #333333;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 6be40be..c54fd3e 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Blue-Theme/src/main/resources/defaults.css
index 6156286..abce165 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Emerald-Theme/src/main/resources/defaults.css
index 2b4396e..592a305 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Green-Theme/src/main/resources/defaults.css
index f8a3bb3..9866d12 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Orange-Theme/src/main/resources/defaults.css
index 764063e..471cd65 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Red-Theme/src/main/resources/defaults.css
index cd1b2d4..1b3e144 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index cd6b0f0..3c4799a 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 5bb373d..55f3740 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 2364f35..0806f72 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 1ec7561..3ce7214 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Violet-Theme/src/main/resources/defaults.css
index 0a12a2d..25f9294 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-Flat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-Flat-Primary-Yellow-Theme/src/main/resources/defaults.css
index f75f8c5..20a38a6 100644
--- a/frameworks/themes/Jewel-Light-Flat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-Flat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -890,6 +890,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -900,32 +907,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 3779476..b0168ef 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index c60a562..42e7bb9 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index 2e47f8d..e1d6c6a 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index fb4d635..c25bf3e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 9cf7cb9..810508b 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 81be3a0..e71be34 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 55b309e..fcf886d 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 90d9aa2..4bb08b9 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index bda15ba..0c03b56 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index a83b1b8..0b7f116 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index e757123..aa35d3d 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 42d4a14..7a55fed 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
 }
 
 @media (max-width: 992px) {
+  .jewel.numericstepper {
+    width: 190px;
+    height: 39px;
+  }
+  .jewel.numericstepper .jewel.textinput {
+    left: 38px;
+  }
   .jewel.numericstepper .jewel.textinput input {
     border-radius: 0;
   }
@@ -901,32 +908,50 @@ j|List {
 .jewel.spinner .jewel.button {
   padding: 0px;
   height: 19px;
-  color: transparent;
   border-radius: 0 0.25rem 0.25rem 0;
   border-left: 0px;
 }
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+  color: transparent;
+}
 .jewel.spinner .jewel.button.up {
   border-bottom-right-radius: 0px;
 }
 .jewel.spinner .jewel.button.up::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 .jewel.spinner .jewel.button.down {
   border-top-right-radius: 0px;
   border-top-style: groove;
 }
 .jewel.spinner .jewel.button.down::after {
-  background-size: 46%;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
+  width: 12px;
+  height: 7px;
+  left: calc(50% - 6px);
+  top: calc(50% - 3.5px);
 }
 
 @media (max-width: 992px) {
+  .jewel.spinner {
+    left: -112px;
+    width: auto;
+  }
+  .jewel.spinner .jewel.button {
+    width: 39px;
+    height: 38px;
+  }
   .jewel.spinner .jewel.button.up {
+    left: 149px;
     border: 1px solid #b3b3b3;
     border-radius: 0 0.25rem 0.25rem 0;
   }
   .jewel.spinner .jewel.button.down {
+    left: -39px;
     border: 1px solid #b3b3b3;
     border-radius: 0.25rem 0 0 0.25rem;
     border-top-style: solid;