fix(input): fix label and border position for material theme. (#1824)

Author: desig9stein

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

@@ -145,6 +145,8 @@ input:placeholder-shown + [part='notch'] [part='label'],
 :host(:not([readonly]):focus-within) {
     [part='label'] {
         @include type-style('caption');
+
+        translate: 0 -73%;
     }
 }
 
@@ -256,8 +258,12 @@ input:placeholder-shown + [part='notch'] [part='label'],
             opacity: 1;
         }
     }
+}
 
+:host(:not([outlined],[aria-haspopup='dialog'],[role='combobox'])[readonly]:focus-within) {
     [part='label'] {
+        @include type-style('caption');
+
         translate: 0 -73%;
     }
 }
@@ -496,6 +502,14 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 
     [part='notch'] {
+        border: {
+            width: $active-border-width;
+            color: var-get($theme, 'focused-border-color');
+        }
+    }
+
+    input:placeholder-shown + [part='notch'],
+    [part~='filled'] + [part='notch'] {
         border: {
             width: $active-border-width;
             color: var-get($theme, 'focused-border-color');
@@ -524,6 +538,16 @@ input:placeholder-shown + [part='notch'] [part='label'],
     }
 }
 
+:host(:not([type='search'],[aria-haspopup='dialog'],[role='combobox'])[outlined]:focus-within) {
+    [part='notch'] {
+        border: {
+            width: $active-border-width;
+            color: var-get($theme, 'focused-border-color');
+            top: $idle-border-width solid transparent;
+        }
+    }
+}
+
 :host(:not([type='search'])[outlined]:focus),
 :host(:not([type='search'])[outlined]:focus-within) {
     [part='suffix'] {