fix(input, file-input): refine label positioning in material theme (#1753)

Author: desig9stein

src/components/file-input/themes/shared/file-input.material.scss

@@ -6,11 +6,6 @@ $theme: $material;
 $idle-border-width: rem(1px) !default;
 $active-border-width: rem(2px) !default;
 
-%label {
-    --label-position: #{sizable(18px, 22px, 26px)};
-
-    transform: translateY(calc(var(--label-position) * -1));
-}
 
 %floated-styles {
     border-top: $idle-border-width solid transparent;
@@ -26,7 +21,6 @@ $active-border-width: rem(2px) !default;
     }
 
     [part='label'] {
-        @extend %label;
         @include type-style('caption');
     }
 
@@ -65,6 +59,11 @@ $active-border-width: rem(2px) !default;
             right: none;
         }
     }
+
+    [part='label'] {
+        translate: 0 -50%;
+        align-self: start;
+    }
 }
 
 :host([outlined]:hover) {
@@ -95,12 +94,12 @@ $active-border-width: rem(2px) !default;
         grid-area: 1 / 3;
     }
 
-    [part='notch'] [part='label'] {
-        transform: translateY(-73%);
-    }
-
     [part~='labelled'] [part~='file-names'] {
         padding-top: rem(20px);
         padding-bottom: rem(6px);
     }
+
+    [part='label'] {
+        translate: 0 -73%;
+    }
 }

src/components/input/themes/shared/input.material.scss

@@ -8,7 +8,7 @@ $active-border-width: rem(2px) !default;
 $fs: rem(16px) !default;
 
 %label {
-    translate: 0 calc(var(--label-position) * -1);
+    translate: 0 -50%;
 }
 
 %floated-styles {
@@ -50,8 +50,8 @@ $fs: rem(16px) !default;
 
 input:placeholder-shown + [part='notch'] [part='label'],
 [part~='filled'] + [part='notch'] [part='label'] {
-    @extend %label;
     @include type-style('caption');
+    @extend %label;
 }
 
 [part~='input'] {
@@ -138,13 +138,25 @@ input:placeholder-shown + [part='notch'] [part='label'],
 
 :host(:focus-within) {
     [part='label'] {
-        @extend %label;
+        color: var-get($theme, 'focused-secondary-color');
+    }
+}
+
+:host(:not([readonly]):focus-within) {
+    [part='label'] {
         @include type-style('caption');
+    }
+}
 
-        color: var-get($theme, 'focused-secondary-color');
+:host([outlined]:not([readonly]):focus-within) {
+    [part='label'] {
+        @extend %label;
+
+        align-self: start;
     }
 }
 
+
 :host([readonly]:not([outlined]):focus-within) {
     :not([part~='filled']) {
         input:not(:placeholder-shown) + [part='notch'] [part='label'] {
@@ -245,7 +257,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
         }
     }
 
-    [part='notch'] [part='label'] {
+    [part='label'] {
         translate: 0 -73%;
     }
 }
@@ -386,8 +398,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
 }
 
 :host([outlined]) {
-    --label-position: calc((#{var-get($theme, 'size')} / 2) - (#{$idle-border-width}));
-
     [part='notch'] {
         border: {
             width: $idle-border-width;
@@ -398,8 +408,18 @@ input:placeholder-shown + [part='notch'] [part='label'],
         }
     }
 
+    &:has(input:placeholder-shown) {
+        [part='label'] {
+            align-self: start;
+        }
+    }
+
     [part~='filled'] + [part='notch'] {
         @extend %floated-styles;
+
+        [part='label'] {
+            align-self: start;
+        }
     }
 }
 
@@ -460,10 +480,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
 }
 
 :host(:not([type='search'])[outlined]:focus-within) {
-    [part='label'] {
-        margin-block-start: calc(#{$active-border-width} / 2);
-    }
-
     [part='start'] {
         border: {
             color: var-get($theme, 'focused-border-color');