fix: fix issues with padding

Author: Justin Kimbrell

.changeset/frank-bikes-glow.md

@@ -0,0 +1,5 @@
+---
+"@vue-interface/form-control": patch
+---
+
+Fixed issues with padding and activity indicators

packages/form-control/src/css/animated-fields.css

@@ -105,11 +105,11 @@
         font-size: calc(--spacing(--value(integer)));
 
         .form-label {
-            padding-left: calc(--value(--form-control-font-size-*, [length]) * 2) !important;
-            padding-left: calc(--spacing(--value(integer)) * 2) !important;
+            padding-left: calc(--value(--form-control-font-size-*, [length]) * 2 + 1px) !important;
+            padding-left: calc(--spacing(--value(integer)) * 2 + 1px) !important;
         }
 
-        .form-control-icon {
+        .form-control-icon.form-control {
             padding-left: calc(--value(--form-control-font-size-*, [length]) * 2);
             padding-left: calc(--spacing(--value(integer)) * 2);
         }

packages/form-control/src/css/form-control.css

@@ -68,6 +68,10 @@
     --form-control-activity-indicator-top: 50%;
     --form-control-activity-indicator-transform: translate(-1rem, -50%);
     --form-control-activity-indicator-transition: all .15s ease-in;
+    --form-control-activity-indicator-display: flex;
+    --form-control-activity-indicator-align-items: center;
+    --form-control-activity-indicator-justify-content: center;
+    --form-control-activity-indicator-font-size: 1em;
 
     /* Form control color specific */
     --form-control-color-width: 3rem;
@@ -110,6 +114,10 @@
         border-color: var(--form-control-dark-border-color);
     }
 
+    .has-icon &.form-control-icon {
+        padding-left: calc(var(--form-control-font-size) * 2);
+    }
+
     &:focus {
         color: var(--form-control-focus-color);
         background-color: var(--form-control-focus-background-color);
@@ -233,6 +241,10 @@
     top: var(--form-control-activity-indicator-top);
     transform: var(--form-control-activity-indicator-transform);
     transition: var(--form-control-activity-indicator-transition);
+    display: var(--form-control-activity-indicator-display);
+    align-items: var(--form-control-activity-indicator-align-items);
+    justify-content: var(--form-control-activity-indicator-justify-content);
+    font-size: var(--form-control-activity-indicator-font-size);
 }
 
 @utility form-control-color {