@ardium-ui/ui 5.0.0-alpha.65 → 5.0.0-alpha.67

package/prebuilt-themes/default/inputs/password-input.css

@@ -37,7 +37,10 @@
   font-size: var(--ard-password-input-font-size, var(--ard-form-field-font-size, 1rem));
   line-height: var(--ard-password-input-line-height, 1.25);
   font-weight: var(--ard-password-input-font-weight, 400);
-  padding: var(--ard-password-input-padding, var(--ard-form-field-padding, 0 0.375rem));
+  padding-left: var(--ard-password-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
+  padding-right: var(--ard-password-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
+  padding-top: var(--ard-password-input-padding-top, var(--ard-form-field-padding-top, 0));
+  padding-bottom: var(--ard-password-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
   color: var(--ard-password-input-color, var(--ard-text));
   min-width: var(--ard-password-input-min-width, 10rem);
   max-width: var(--ard-password-input-max-width, 100%);
@@ -47,6 +50,16 @@
   text-size-adjust: 100%;
   display: flex;
   align-items: center;
+  height: 100%;
+}
+.ard-password-input .ard-input-container > * {
+  position: absolute;
+  inset: 0;
+  padding-left: var(--ard-password-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
+  padding-right: var(--ard-password-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
+  padding-top: var(--ard-password-input-padding-top, var(--ard-form-field-padding-top, 0));
+  padding-bottom: var(--ard-password-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
+  max-width: 100%;
 }
 .ard-password-input .ard-input-container .ard-placeholder {
   font: inherit;
@@ -55,24 +68,26 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
   pointer-events: none;
+  display: flex;
+  align-items: center;
 }
 .ard-password-input .ard-input-container input {
   border: none;
   background: transparent;
   outline: none;
   font: inherit;
-  padding: 0;
   color: inherit;
   display: block;
-  width: 100%;
 }
 .ard-password-input.ard-compact {
   height: var(--ard-password-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
   font-size: var(--ard-password-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
   line-height: var(--ard-password-input-line-height-compact, 1);
-  padding: var(--ard-password-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
+  padding-left: var(--ard-password-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
+  padding-right: var(--ard-password-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
+  padding-top: var(--ard-password-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
+  padding-bottom: var(--ard-password-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
 }
 .ard-password-input.ard-revealable {
   padding-right: 0;

package/prebuilt-themes/default/inputs/password-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/password-input.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAKA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EDpBE,QCsBE;EDrBF;EACA;EACA;EACA;EACA;EACA,KCkBE;EDjBF;EACA;EACA,WCgBE;EDfF,aCiBE;EDhBF,aCkBE;EDjBF,SCkBE;EDjBF,OCmBE;EAIF;EACA;;ADtBA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCWF;EDVE,OCSF;EDRE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCtBA;EDuBA,WCpBA;EDqBA,aCnBA;EDoBA,SCjBA;;AAQF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA","file":"password-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/password-input.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAWA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EDpBE,QCsBE;EDrBF;EACA;EACA;EACA;EACA;EACA,KCkBE;EDjBF;EACA;EACA,WCgBE;EDfF,aCiBE;EDhBF,aCkBE;EDjBF,cCqBE;EDpBF,eCkBE;EDjBF,aCgBE;EDfF,gBCiBE;EDhBF,OCsBE;EAIF;EACA;;ADzBA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,cCKF;EDJE,eCEF;EDDE;EACA,gBCCF;EDAE;;AAEF;EACE;EACA,SCIF;EDHE,OCEF;EDDE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QClCA;EDmCA,WChCA;EDiCA,aC/BA;EDgCA,cCvBA;EDwBA,eC1BA;ED2BA,aC5BA;ED6BA,gBC3BA;;AASF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;;AAMJ;EACE;EACA","file":"password-input.css"}

package/prebuilt-themes/default/tabber.css

@@ -11,8 +11,8 @@
   --ard-tabber-tab-hover-overlay-opacity: 4%;
   --ard-tabber-tab-active-overlay-opacity: 12%;
   --ard-tabber-tab-focus-visible-overlay-opacity: 18%;
-  --ard-tabber-tab-disabled-overlay-opacity: 12%;
-  --ard-tabber-tab-disabled-opacity: 12%;
+  --ard-tabber-tab-disabled-overlay-opacity: 0%;
+  --ard-tabber-tab-disabled-opacity: 50%;
 }
 
 ard-tabber {
@@ -233,9 +233,14 @@ ard-tabber {
 }
 .ard-tabber .ard-tabber-tabs .ard-tab-button.ard-tab-disabled {
   opacity: var(--ard-tabber-tab-disabled-opacity);
+  pointer-events: none;
 }
 .ard-tabber .ard-tabber-tabs .ard-tab-button.ard-tab-disabled .ard-focus-overlay {
   opacity: var(--ard-tabber-tab-disabled-overlay-opacity, 18%);
 }
+.ard-tabber .ard-tabber-tabs .ard-tab-button.ard-tab-disabled.ard-tab-with-pointer-events-when-disabled {
+  pointer-events: all;
+  cursor: not-allowed;
+}
 
 /*# sourceMappingURL=tabber.css.map */

package/prebuilt-themes/default/tabber.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/tabber.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AC/BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EE3DJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoDM;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAKA;EACE;;AAKF;EACE;;AAIF;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE","file":"tabber.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/tabber.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AC/BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EE3DJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFoDM;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAKA;EACE;;AAKF;EACE;;AAIF;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"tabber.css"}

package/themes/default/core.scss

@@ -46,8 +46,19 @@
   --ard-form-field-height-compact: 1.6875rem;
   --ard-form-field-font-size: 1rem;
   --ard-form-field-font-size-compact: 1rem;
-  --ard-form-field-padding: 0 0.375rem;
-  --ard-form-field-padding-compact: 0 0.375rem;
+  --ard-form-field-padding-top: 0;
+  --ard-form-field-padding-right: 0.375rem;
+  --ard-form-field-padding-bottom: 0;
+  --ard-form-field-padding-left: 0.375rem;
+  --ard-form-field-padding-top-compact: 0;
+  --ard-form-field-padding-right-compact: 0.375rem;
+  --ard-form-field-padding-bottom-compact: 0;
+  --ard-form-field-padding-left-compact: 0.375rem;
+  --ard-form-field-transitions-duration: 150ms;
+  --ard-form-field-hover-overlay-opacity: 3%;
+  --ard-form-field-focus-overlay-opacity: 6%;
+  --ard-form-field-disabled-opacity: 50%;
+  --ard-form-field-disabled-transparent-overlay-opacity: 4.5%;
 
   --ard-rounded-corner-radius: 0.375rem;
 

package/themes/default/form-field-frame.scss

@@ -10,8 +10,6 @@
   align-items: center;
   justify-content: stretch;
   position: relative;
-  font-size: 1rem;
-  line-height: 1.25em;
   font-family: var(--ard-font-family);
 
   .ard-form-field-content-container {
@@ -30,17 +28,15 @@
     align-items: center;
   }
   .ard-form-field-prefix-container {
-    padding-left: 0.375em;
+    padding-left: var(--ard-form-field-padding-left, 0.375rem);
   }
   .ard-form-field-suffix-container {
-    padding-right: 0.375em;
+    padding-right: var(--ard-form-field-padding-right, 0.375rem);
   }
 
   //! compact
   &.ard-compact {
     min-height: ARD.$form-field-compact-height;
-    font-size: 0.85rem;
-    line-height: 1;
   }
 
   //! appearance & variant
@@ -48,32 +44,39 @@
   @include defaultMixins.formVariants();
   background: var(--ard-appearance-background);
   border: var(--ard-appearance-border);
-  transition: border-color 0.15s ARD.$timing-fn;
 
   .ard-form-field-overlay {
     background: ARD.$overlay;
     opacity: 0;
-    transition: opacity 0.15s ARD.$timing-fn, background-color 0.15s ARD.$timing-fn;
   }
 
   &:hover {
     .ard-form-field-overlay {
-      opacity: 3%;
+      opacity: var(--ard-form-field-hover-overlay-opacity, 3%);
     }
   }
   &.ard-focused {
     .ard-form-field-overlay {
-      opacity: 6%;
+      opacity: var(--ard-form-field-focus-overlay-opacity, 6%);
+    }
+  }
+  &.ard-enable-transitions {
+    transition: border-color var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn;
+
+    .ard-form-field-overlay {
+      transition:
+        opacity var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn,
+        background-color var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn;
     }
   }
 }
 .ard-disabled .ard-form-field-frame {
   pointer-events: none;
-  opacity: 50%;
+  opacity: var(--ard-form-field-disabled-opacity, 50%);
 
   &.ard-appearance-transparent {
     .ard-form-field-overlay {
-      opacity: 4.5%;
+      opacity: var(--ard-form-field-disabled-transparent-overlay-opacity, 4.5%);
     }
   }
 }

package/themes/default/inputs/_shared.scss

@@ -12,8 +12,14 @@
   $line-height,
   $line-height-compact,
   $font-weight,
-  $padding,
-  $padding-compact,
+  $padding-top,
+  $padding-right,
+  $padding-bottom,
+  $padding-left,
+  $padding-top-compact,
+  $padding-right-compact,
+  $padding-bottom-compact,
+  $padding-left-compact,
   $color,
   $placeholder-color,
   $placeholder-opacity
@@ -30,7 +36,10 @@
   font-size: $font-size;
   line-height: $line-height;
   font-weight: $font-weight;
-  padding: $padding;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  padding-top: $padding-top;
+  padding-bottom: $padding-bottom;
   color: $color;
 
   .ard-input-container {
@@ -38,7 +47,17 @@
     text-size-adjust: 100%;
     display: flex;
     align-items: center;
+    height: 100%;
 
+    > * {
+      position: absolute;
+      inset: 0;
+      padding-left: $padding-left;
+      padding-right: $padding-right;
+      padding-top: $padding-top;
+      padding-bottom: $padding-bottom;
+      max-width: 100%;
+    }
     .ard-placeholder {
       font: inherit;
       opacity: $placeholder-opacity;
@@ -46,8 +65,9 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 100%;
       pointer-events: none;
+      display: flex;
+      align-items: center;
     }
 
     input {
@@ -55,10 +75,8 @@
       background: transparent;
       outline: none;
       font: inherit;
-      padding: 0;
       color: inherit;
       display: block;
-      width: 100%;
     }
   }
   //! compact
@@ -66,6 +84,9 @@
     height: $height-compact;
     font-size: $font-size-compact;
     line-height: $line-height-compact;
-    padding: $padding-compact;
+    padding-left: $padding-left-compact;
+    padding-right: $padding-right-compact;
+    padding-top: $padding-top-compact;
+    padding-bottom: $padding-bottom-compact;
   }
 }

package/themes/default/inputs/autocomplete-input.scss

@@ -14,8 +14,14 @@
   --ard-autocomplete-input-line-height: 1.25;
   --ard-autocomplete-input-line-height-compact: 1;
   --ard-autocomplete-input-font-weight: 400;
-  // --ard-autocomplete-input-padding: ;
-  // --ard-autocomplete-input-padding-compact: ;
+  // --ard-autocomplete-input-padding-top: ;
+  // --ard-autocomplete-input-padding-right: ;
+  // --ard-autocomplete-input-padding-bottom: ;
+  // --ard-autocomplete-input-padding-left: ;
+  // --ard-autocomplete-input-padding-top-compact: ;
+  // --ard-autocomplete-input-padding-right-compact: ;
+  // --ard-autocomplete-input-padding-bottom-compact: ;
+  // --ard-autocomplete-input-padding-left-compact: ;
   // --ard-autocomplete-input-color: ;
   // --ard-autocomplete-input-placeholder-color: ;
   --ard-autocomplete-input-placeholder-opacity: 60%;
@@ -47,8 +53,14 @@
     var(--ard-autocomplete-input-line-height, 1.25),
     var(--ard-autocomplete-input-line-height-compact, 1),
     var(--ard-autocomplete-input-font-weight, 400),
-    var(--ard-autocomplete-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-autocomplete-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-autocomplete-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-autocomplete-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-autocomplete-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-autocomplete-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-autocomplete-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-autocomplete-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-autocomplete-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-autocomplete-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-autocomplete-input-color, #{ARD.$text}),
     var(--ard-autocomplete-input-placeholder-color, #{ARD.$text}),
     var(--ard-autocomplete-input-placeholder-opacity, 60%)
@@ -59,6 +71,8 @@
   @include CB.clearButton();
 
   .ard-autocomplete {
+    display: flex;
+    align-items: center;
     opacity: var(--ard-autocomplete-input-autocomplete-opacity, 37.5%);
   }
 }

package/themes/default/inputs/date-input.scss

@@ -12,11 +12,17 @@
   --ard-date-input-line-height: 1.25;
   --ard-date-input-line-height-compact: 1;
   --ard-date-input-font-weight: 400;
-  // --ard-date-input-padding-compact: ;
+  // --ard-date-input-padding-top: ;
+  // --ard-date-input-padding-right: ;
+  // --ard-date-input-padding-bottom: ;
+  // --ard-date-input-padding-left: ;
+  // --ard-date-input-padding-top-compact: ;
+  // --ard-date-input-padding-right-compact: ;
+  // --ard-date-input-padding-bottom-compact: ;
+  // --ard-date-input-padding-left-compact: ;
   // --ard-date-input-color: ;
   // --ard-date-input-placeholder-color: ;
   --ard-date-input-placeholder-opacity: 60%;
-  // --ard-date-input-padding: ;
 
   --ard-date-input-input-padding: 0 2.625rem 0 0.375rem;
   --ard-date-input-multipage-gap: 0;
@@ -34,8 +40,14 @@ ard-multipage-date-range-input .ard-multipage-date-range-input {
     var(--ard-date-input-line-height, 1.25),
     var(--ard-date-input-line-height-compact, 1),
     var(--ard-date-input-font-weight, 400),
-    var(--ard-date-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-date-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-date-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-date-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-date-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-date-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-date-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-date-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-date-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-date-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-date-input-color, #{ARD.$text}),
     var(--ard-date-input-placeholder-color, #{ARD.$text}),
     var(--ard-date-input-placeholder-opacity, 60%)

package/themes/default/inputs/file-input.scss

@@ -15,8 +15,14 @@
   --ard-file-input-line-height: 1.25;
   --ard-file-input-line-height-compact: 1;
   --ard-file-input-font-weight: 400;
-  // --ard-file-input-padding: ;
-  // --ard-file-input-padding-compact: ;
+  // --ard-file-input-padding-top: ;
+  // --ard-file-input-padding-right: ;
+  // --ard-file-input-padding-bottom: ;
+  // --ard-file-input-padding-left: ;
+  // --ard-file-input-padding-top-compact: ;
+  // --ard-file-input-padding-right-compact: ;
+  // --ard-file-input-padding-bottom-compact: ;
+  // --ard-file-input-padding-left-compact: ;
   // --ard-file-input-color: ;
   // --ard-file-input-placeholder-color: ;
   --ard-file-input-placeholder-opacity: 60%;
@@ -61,8 +67,14 @@
     var(--ard-file-input-line-height, 1.25),
     var(--ard-file-input-line-height-compact, 1),
     var(--ard-file-input-font-weight, 400),
-    var(--ard-file-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-file-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-file-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-file-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-file-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-file-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-file-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-file-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-file-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-file-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-file-input-color, #{ARD.$text}),
     var(--ard-file-input-placeholder-color, #{ARD.$text}),
     var(--ard-file-input-placeholder-opacity, 60%)
@@ -97,7 +109,7 @@
     border: var(--ard-file-input-browse-button-border, none);
     border-radius: var(--ard-file-input-browse-button-border-radius, 9999px);
     background: var(--ard-file-input-browse-button-background, none);
-    padding: var(--ard-file-input-browse-butto-padding, 0);
+    padding: var(--ard-file-input-browse-button-padding, 0);
     color: var(--ard-file-input-browse-button-color, #{ARD.$text});
     position: relative;
     display: flex;

package/themes/default/inputs/hex-input.scss

@@ -14,8 +14,14 @@
   --ard-hex-input-line-height: 1.25;
   --ard-hex-input-line-height-compact: 1;
   --ard-hex-input-font-weight: 400;
-  // --ard-hex-input-padding: ;
-  // --ard-hex-input-padding-compact: ;
+  // --ard-hex-input-padding-top: ;
+  // --ard-hex-input-padding-right: ;
+  // --ard-hex-input-padding-bottom: ;
+  // --ard-hex-input-padding-left: ;
+  // --ard-hex-input-padding-top-compact: ;
+  // --ard-hex-input-padding-right-compact: ;
+  // --ard-hex-input-padding-bottom-compact: ;
+  // --ard-hex-input-padding-left-compact: ;
   // --ard-hex-input-color: ;
   // --ard-hex-input-placeholder-color: ;
   --ard-hex-input-placeholder-opacity: 60%;
@@ -37,8 +43,14 @@
     var(--ard-hex-input-line-height, 1.25),
     var(--ard-hex-input-line-height-compact, 1),
     var(--ard-hex-input-font-weight, 400),
-    var(--ard-hex-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-hex-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-hex-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-hex-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-hex-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-hex-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-hex-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-hex-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-hex-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-hex-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-hex-input-color, #{ARD.$text}),
     var(--ard-hex-input-placeholder-color, #{ARD.$text}),
     var(--ard-hex-input-placeholder-opacity, 60%)

package/themes/default/inputs/input.scss

@@ -14,8 +14,14 @@
   --ard-input-line-height: 1.25;
   --ard-input-line-height-compact: 1;
   --ard-input-font-weight: 400;
-  // --ard-input-padding: ;
-  // --ard-input-padding-compact: ;
+  // --ard-input-padding-left: ;
+  // --ard-input-padding-right: ;
+  // --ard-input-padding-top: ;
+  // --ard-input-padding-bottom: ;
+  // --ard-input-padding-left-compact: ;
+  // --ard-input-padding-right-compact: ;
+  // --ard-input-padding-top-compact: ;
+  // --ard-input-padding-bottom-compact: ;
   // --ard-input-color: ;
   // --ard-input-placeholder-color: ;
   --ard-input-placeholder-opacity: 60%;
@@ -34,8 +40,14 @@
     var(--ard-input-line-height, 1.25),
     var(--ard-input-line-height-compact, 1),
     var(--ard-input-font-weight, 400),
-    var(--ard-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-input-color, #{ARD.$text}),
     var(--ard-input-placeholder-color, #{ARD.$text}),
     var(--ard-input-placeholder-opacity, 60%)

package/themes/default/inputs/number-input.scss

@@ -13,8 +13,14 @@
   --ard-number-input-line-height: 1.25;
   --ard-number-input-line-height-compact: 1;
   --ard-number-input-font-weight: 400;
-  // --ard-number-input-padding: ;
-  // --ard-number-input-padding-compact: ;
+  // --ard-number-input-padding-top: ;
+  // --ard-number-input-padding-right: ;
+  // --ard-number-input-padding-bottom: ;
+  // --ard-number-input-padding-left: ;
+  // --ard-number-input-padding-top-compact: ;
+  // --ard-number-input-padding-right-compact: ;
+  // --ard-number-input-padding-bottom-compact: ;
+  // --ard-number-input-padding-left-compact: ;
   // --ard-number-input-color: ;
   // --ard-number-input-placeholder-color: ;
   --ard-number-input-placeholder-opacity: 60%;
@@ -37,8 +43,14 @@ ard-number-input {
     var(--ard-number-input-line-height, 1.25),
     var(--ard-number-input-line-height-compact, 1),
     var(--ard-number-input-font-weight, 400),
-    var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-number-input-color, #{ARD.$text}),
     var(--ard-number-input-placeholder-color, #{ARD.$text}),
     var(--ard-number-input-placeholder-opacity, 60%)
@@ -50,7 +62,7 @@ ard-number-input {
   .ard-input-container {
     height: 100%;
     max-width: 100%;
-    padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
+    padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem)); // TODO
 
     & > input {
       width: 100%;

package/themes/default/inputs/password-input.scss

@@ -14,8 +14,14 @@
   --ard-password-input-line-height: 1.25;
   --ard-password-input-line-height-compact: 1;
   --ard-password-input-font-weight: 400;
-  // --ard-password-input-padding: ;
-  // --ard-password-input-padding-compact: ;
+  // --ard-password-input-padding-top: ;
+  // --ard-password-input-padding-right: ;
+  // --ard-password-input-padding-bottom: ;
+  // --ard-password-input-padding-left: ;
+  // --ard-password-input-padding-top-compact: ;
+  // --ard-password-input-padding-right-compact: ;
+  // --ard-password-input-padding-bottom-compact: ;
+  // --ard-password-input-padding-left-compact: ;
   // --ard-password-input-color: ;
   // --ard-password-input-placeholder-color: ;
   --ard-password-input-placeholder-opacity: 60%;
@@ -48,8 +54,14 @@
     var(--ard-password-input-line-height, 1.25),
     var(--ard-password-input-line-height-compact, 1),
     var(--ard-password-input-font-weight, 400),
-    var(--ard-password-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-password-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-password-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-password-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-password-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-password-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-password-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-password-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-password-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-password-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-password-input-color, #{ARD.$text}),
     var(--ard-password-input-placeholder-color, #{ARD.$text}),
     var(--ard-password-input-placeholder-opacity, 60%)

package/themes/default/tabber.scss

@@ -17,8 +17,8 @@
   --ard-tabber-tab-hover-overlay-opacity: 4%;
   --ard-tabber-tab-active-overlay-opacity: 12%;
   --ard-tabber-tab-focus-visible-overlay-opacity: 18%;
-  --ard-tabber-tab-disabled-overlay-opacity: 12%;
-  --ard-tabber-tab-disabled-opacity: 12%;
+  --ard-tabber-tab-disabled-overlay-opacity: 0%;
+  --ard-tabber-tab-disabled-opacity: 50%;
 }
 
 ard-tabber {
@@ -114,10 +114,15 @@ ard-tabber {
 
       &.ard-tab-disabled {
         opacity: var(--ard-tabber-tab-disabled-opacity);
+        pointer-events: none;
 
         .ard-focus-overlay {
           opacity: var(--ard-tabber-tab-disabled-overlay-opacity, 18%);
         }
+        &.ard-tab-with-pointer-events-when-disabled {
+          pointer-events: all;
+          cursor: not-allowed;
+        }
       }
     }
   }