mtrl 0.2.7 → 0.2.9

package/src/{components/textfield/_styles.scss → styles/components/_textfield.scss}

@@ -28,7 +28,8 @@ $component: '#{base.$prefix}-textfield';
     border-radius: 2px;
     color: t.color('on-surface-variant');
     transition: transform v.motion('duration-short4') v.motion('easing-emphasized'),
-                color v.motion('duration-short2') v.motion('easing-standard');
+                color v.motion('duration-short2') v.motion('easing-standard'),
+                left v.motion('duration-short4') v.motion('easing-emphasized');
   }
   
   // Input element
@@ -68,6 +69,65 @@ $component: '#{base.$prefix}-textfield';
       }
     }
   }
+  
+  // Leading icon
+  &-leading-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    pointer-events: none;
+    color: t.color('on-surface-variant');
+    z-index: 1;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Trailing icon
+  &-trailing-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: t.color('on-surface-variant');
+    z-index: 1;
+    cursor: pointer;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Adjustments when icons are present
+  &--with-leading-icon {
+    .#{$component}-label {
+      left: 44px;
+    }
+    
+    .#{$component}-input {
+      padding-left: 44px;
+    }
+  }
+  
+  &--with-trailing-icon {
+    .#{$component}-input {
+      padding-right: 44px;
+    }
+  }
 
   // Error state
   &--error {
@@ -76,6 +136,11 @@ $component: '#{base.$prefix}-textfield';
     .#{$component}-label {
       color: t.color('error');
     }
+    
+    .#{$component}-leading-icon,
+    .#{$component}-trailing-icon {
+      color: t.color('error');
+    }
   }
   
   // Disabled state
@@ -85,15 +150,20 @@ $component: '#{base.$prefix}-textfield';
     background-color: t.alpha('on-surface', 0.04);
     pointer-events: none;
     
-    & ~ .#{$component}-label {
+    & ~ .#{$component}-label,
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon {
       color: t.color('on-surface');
       opacity: 0.38;
     }
   }
   
-  // Helper text
+  // Helper text / Supporting text
   &-helper {
     @include m.typography('body-small');
+    position: absolute;
+    bottom: -18px;
+    left: 16px;
     margin-top: 4px;
     color: t.color('on-surface-variant');
     
@@ -127,21 +197,46 @@ $component: '#{base.$prefix}-textfield';
       margin-left: 0;
       margin-right: 4px;
     }
+    
+    &-leading-icon {
+      left: auto;
+      right: 12px;
+    }
+    
+    &-trailing-icon {
+      right: auto;
+      left: 12px;
+    }
+    
+    &--with-leading-icon {
+      .#{$component}-label {
+        left: auto;
+        right: 44px;
+      }
+      
+      .#{$component}-input {
+        padding-left: 16px;
+        padding-right: 44px;
+      }
+    }
+    
+    &--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 16px;
+        padding-left: 44px;
+      }
+    }
   }
   
   // ===== FILLED VARIANT =====
   &--filled {
-    border-bottom: 1px solid t.color('outline');
-    
     .#{$component}-input {
       background-color: t.color('surface-container-highest');
       padding: 20px 16px 7px;
+      border-bottom: 1px solid t.color('outline');
       border-radius: f.get-shape('extra-small') f.get-shape('extra-small') 0 0;
       @include m.motion-transition(background-color, border-color);
-      
-      &:focus {
-        padding-bottom: 6px;
-      }
+
 
       // Autofill styles for filled variant
       &:-webkit-autofill {
@@ -161,6 +256,19 @@ $component: '#{base.$prefix}-textfield';
       }
     }
 
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: t.color('primary');
+      border-radius: 0;
+      pointer-events: none;
+      transition: 0.2s opacity ease;
+    }
+
     // Populated field (not empty) or focused field label position
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
@@ -168,48 +276,33 @@ $component: '#{base.$prefix}-textfield';
     }
 
     // Focus state
-    &.#{$component}--focused {
-      border-bottom: 2px solid t.color('primary');
-      
+    &.#{$component}--focused {    
       .#{$component}-label {
         color: t.color('primary');
       }
       
-      .#{$component}-input {
-        height: 55px;
-        padding: 20px 16px 6px;
-      }
-
-
-      &:hover {
-        border-bottom: 2px solid t.color('primary');
+      &::before {
+        opacity: 1
       }
     }
     
     // Hover state
-    &:hover {
-      border-bottom: 1px solid t.color('primary');
-      
+    &:hover {    
       .#{$component}-label {
         color: t.color('primary');
       }
     }
     
     // Error state
-    &.#{$component}--error {
-      border-bottom: 2px solid t.color('error');
-      
+    &.#{$component}--error {    
+      &::before {
+        opacity: 1;
+        background-color: t.color('error');
+      }
+
       .#{$component}-label {
         color: t.color('error');
       }
-      
-      &:hover {
-        border-bottom: 2px solid t.color('error');
-      }
-      
-      &.#{$component}--focused {
-        border-bottom: 2px solid t.color('error');
-      }
     }
     
     // Disabled state
@@ -222,24 +315,80 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
+    // Icon adjustments for filled variant
+    &.#{$component}--with-leading-icon {
+      .#{$component}-input {
+        padding: 20px 16px 7px 44px;
+      }
+      
+      .#{$component}-label {
+        left: 44px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-95%) scale(0.75);
+        // Keep the label aligned with input text when focused/filled
+        left: 44px;
+      }
+      
+      .#{$component}-leading-icon {
+        top: 28px;
+      }
+    }
+    
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
+      
+      .#{$component}-trailing-icon {
+        top: 28px;
+      }
+    }
+    
     // RTL support
     @include m.rtl {
       .#{$component}-label {
         left: auto;
         right: 16px;
       }
+      
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding: 20px 44px 7px 16px;
+        }
+        
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+        
+        &:not(.#{$component}--empty) .#{$component}-label,
+        &.#{$component}--focused .#{$component}-label {
+          // Keep the label aligned with input text when focused/filled in RTL
+          right: 44px;
+        }
+      }
+      
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
     }
   }
   
   // ===== OUTLINED VARIANT =====
   &--outlined {
-    border: 1px solid t.color('outline');
     border-radius: f.get-shape('extra-small');
     @include m.motion-transition(border-color);
     
     .#{$component}-input {
       background-color: transparent;
-      padding: 13px 16px 14px;
+      padding: 12px 15px 13px;
+      border: 1px solid t.color('outline');
       @include m.motion-transition(padding);
 
       // Autofill styles for outlined variant
@@ -249,8 +398,6 @@ $component: '#{base.$prefix}-textfield';
         & ~ .#{$component}-label {
           background-color: t.color('surface');
           transform: translateY(-145%) scale(0.75);
-          left: 13px;
-          padding: 0 4px;
         }
       }
 
@@ -258,73 +405,102 @@ $component: '#{base.$prefix}-textfield';
         & ~ .#{$component}-label {
           background-color: t.color('surface');
           transform: translateY(-145%) scale(0.75);
-          left: 13px;
-          padding: 0 4px;
         }
       }
     }
 
+    .#{$component}-label {
+      padding: 0 4px;
+      left: 12px;
+      top: 49%;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      border: 1.5px solid t.color('primary');
+      border-radius: f.get-shape('extra-small');
+      pointer-events: none;
+      transition: 0.1s opacity ease;
+    }
+
     // Populated field (not empty) or focused field label position
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
-      background-color: t.color('surface');
-      transform: translateY(-145%) scale(0.75);
-      left: 13px;
       padding: 0 4px;
+      background-color: t.color('surface');
+      transform: translateY(-147%) scale(0.75);
     }
 
     // Focus state
     &.#{$component}--focused {
-      border: 2px solid t.color('primary');
-      
-      .#{$component}-label {
-        color: t.color('primary');
-        border-radius: 2px;
-        left: 12px;
-      }
-      
-      .#{$component}-input {
-        height: 54px;
-        padding: 12px 15px 13px;
+      &::before {
+        opacity: 1;
       }
-      
       &:hover {
-        border: 2px solid t.color('primary');
+        &::before {
+          border-width: 2px;
+        }
       }
     }
     
     // Hover state
-    &:hover {
-      border: 1px solid t.color('primary');
-      
+    &:hover {    
       .#{$component}-label {
         color: t.color('primary');
       }
+
+      &::before {
+        opacity: 1;
+        border: 1px solid t.color('primary');
+      }
     }
     
     // Error state
-    &.#{$component}--error {
-      border: 2px solid t.color('error');
-      
+    &.#{$component}--error {    
+      &::before {
+        opacity: 1;
+        border: 2px solid t.color('error');
+      }
+
       .#{$component}-label {
         color: t.color('error');
-        left: 12px;
       }
-      
+    }
+    
+    // Disabled state
+    &.#{$component}--disabled {
+      pointer-events: none;
+      &::before {
+        opacity: 1;
+        border: 1px solid t.alpha('on-surface', 0.38);
+      }
+    }
+    
+    // Icon adjustments for outlined variant
+    &.#{$component}--with-leading-icon {
       .#{$component}-input {
-        padding: 12px 15px 13px;
+        padding-left: 44px;
       }
       
-      &:hover,
-      &.#{$component}--focused {
-        border: 2px solid t.color('error');
+      .#{$component}-label {
+        left: 44px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        // For outlined variant, move label to default position
+        left: 13px;
       }
     }
     
-    // Disabled state
-    &.#{$component}--disabled {
-      border-color: t.alpha('on-surface', 0.38);
-      pointer-events: none;
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
     }
     
     // RTL support
@@ -342,6 +518,72 @@ $component: '#{base.$prefix}-textfield';
       &.#{$component}--error .#{$component}-label {
         right: 12px;
       }
+      
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding-left: 16px;
+          padding-right: 44px;
+        }
+        
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+        
+        &:not(.#{$component}--empty) .#{$component}-label,
+        &.#{$component}--focused .#{$component}-label {
+          // For outlined variant in RTL, move label to default position
+          right: 13px;
+          left: auto;
+        }
+      }
+      
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
+    }
+  }
+  
+   // Multiline styles
+  &--multiline {
+    .#{$component}-input {
+      min-height: 100px;
+      height: auto;
+      resize: vertical;
+      padding-top: 12px;
+    }
+    
+    &--filled {
+      .#{$component}-input {
+
+      }
+    }
+
+    &--outlined {
+      .#{$component}-input {
+
+      }
+    }
+
+
+    .#{$component}-label {
+      top: 24px;
+    }
+  }
+
+
+  // Support for multiline inputs
+  &-input[type="multiline"] {
+    min-height: 100px;
+    resize: vertical;
+    
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon {
+      top: 20px;
+      transform: none;
     }
   }
 }