fix(input): adjust placeholder-shown styles and label alignment in material theme (#1792)

* fix(input): adjust placeholder-shown styles and label alignment in material theme

* fix(input): use :has selector to fix the behavior in firefox

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: desig9stein

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

@@ -159,7 +159,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
 
 :host([readonly]:not([outlined]):focus-within) {
     :not([part~='filled']) {
-        input:not(:placeholder-shown) + [part='notch'] [part='label'] {
+        input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
             translate: 0;
             font-size: initial;
         }
@@ -408,15 +408,15 @@ input:placeholder-shown + [part='notch'] [part='label'],
         }
     }
 
-    &:has(input:placeholder-shown) {
+    [part~='filled'] + [part='notch'] {
+        @extend %floated-styles;
+
         [part='label'] {
             align-self: start;
         }
     }
 
-    [part~='filled'] + [part='notch'] {
-        @extend %floated-styles;
-
+    [part~='container']:has(input:placeholder-shown) {
         [part='label'] {
             align-self: start;
         }
@@ -451,12 +451,13 @@ input:placeholder-shown + [part='notch'] [part='label'],
 
 :host(:not([type='search'])[readonly][outlined]:focus-within) {
     :not([part~='filled']) {
-        input:not(:placeholder-shown) + [part='notch'] [part='label'] {
+        input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
             translate: 0;
             font-size: initial;
+            align-self: center;
         }
 
-        input:not(:placeholder-shown) + [part='notch'] {
+        input:has(:not(:placeholder-shown)) + [part='notch'] {
             border: {
                 width: $active-border-width;
                 color: var-get($theme, 'focused-border-color');
@@ -563,7 +564,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
 }
 
 :host(:not([type='search'])[readonly][outlined][invalid]:focus-within) {
-    input:not(:placeholder-shown) + [part='notch'] {
+    input:has(:not(:placeholder-shown)) + [part='notch'] {
         border: {
             width: $active-border-width;
             color: var-get($theme, 'error-secondary-color');