mtrl 0.3.6 → 0.3.8

package/src/styles/components/_textfield.scss

@@ -1,4 +1,4 @@
-// src/components/textfield/_styles.scss
+// src/styles/components/_textfield.scss
 @use '../../styles/abstract/base' as base;
 @use '../../styles/abstract/variables' as v;
 @use '../../styles/abstract/functions' as f;
@@ -70,6 +70,40 @@ $component: '#{base.$prefix}-textfield';
     }
   }
   
+  // Prefix text
+  &-prefix {
+    @include m.typography('body-large');
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: t.color('on-surface');
+    pointer-events: none;
+    z-index: 2; // Increased to ensure it stays above input
+    white-space: nowrap; // Prevent text wrapping
+    max-width: 40%; // Prevent extreme overflow
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: top v.motion('duration-short4') v.motion('easing-emphasized'); // Add transition for top position
+  }
+  
+  // Suffix text
+  &-suffix {
+    @include m.typography('body-large');
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: t.color('on-surface');
+    pointer-events: none;
+    z-index: 2; // Increased to ensure it stays above input
+    white-space: nowrap; // Prevent text wrapping
+    max-width: 40%; // Prevent extreme overflow
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: top v.motion('duration-short4') v.motion('easing-emphasized'); // Add transition for top position
+  }
+  
   // Leading icon
   &-leading-icon {
     position: absolute;
@@ -84,6 +118,7 @@ $component: '#{base.$prefix}-textfield';
     pointer-events: none;
     color: t.color('on-surface-variant');
     z-index: 1;
+    transition: top v.motion('duration-short4') v.motion('easing-emphasized'); // Add transition for top position
     
     svg {
       width: 20px;
@@ -105,6 +140,7 @@ $component: '#{base.$prefix}-textfield';
     color: t.color('on-surface-variant');
     z-index: 1;
     cursor: pointer;
+    transition: top v.motion('duration-short4') v.motion('easing-emphasized'); // Add transition for top position
     
     svg {
       width: 20px;
@@ -112,6 +148,27 @@ $component: '#{base.$prefix}-textfield';
     }
   }
   
+  // Adjustments when prefix/suffix are present - base case styling
+  // JavaScript will handle dynamic sizing, these are fallbacks
+  &--with-prefix {
+    .#{$component}-label {
+      // Default value - will be overridden by JS for precise positioning
+      left: 48px;
+    }
+    
+    .#{$component}-input {
+      // Default value - will be overridden by JS for precise padding
+      padding-left: 48px;
+    }
+  }
+  
+  &--with-suffix {
+    .#{$component}-input {
+      // Default value - will be overridden by JS for precise padding
+      padding-right: 48px;
+    }
+  }
+  
   // Adjustments when icons are present
   &--with-leading-icon {
     .#{$component}-label {
@@ -121,12 +178,41 @@ $component: '#{base.$prefix}-textfield';
     .#{$component}-input {
       padding-left: 44px;
     }
+    
+    // If there's also a prefix, adjust positions
+    &.#{$component}--with-prefix {
+      .#{$component}-prefix {
+        left: 44px;
+      }
+      
+      .#{$component}-label {
+        // Default value - will be overridden by JS for precise positioning
+        left: 76px;
+      }
+      
+      .#{$component}-input {
+        // Default value - will be overridden by JS for precise padding
+        padding-left: 76px;
+      }
+    }
   }
   
   &--with-trailing-icon {
     .#{$component}-input {
       padding-right: 44px;
     }
+    
+    // If there's also a suffix, adjust positions
+    &.#{$component}--with-suffix {
+      .#{$component}-suffix {
+        right: 44px;
+      }
+      
+      .#{$component}-input {
+        // Default value - will be overridden by JS for precise padding
+        padding-right: 76px;
+      }
+    }
   }
 
   // Error state
@@ -138,7 +224,9 @@ $component: '#{base.$prefix}-textfield';
     }
     
     .#{$component}-leading-icon,
-    .#{$component}-trailing-icon {
+    .#{$component}-trailing-icon,
+    .#{$component}-prefix,
+    .#{$component}-suffix {
       color: t.color('error');
     }
   }
@@ -152,7 +240,9 @@ $component: '#{base.$prefix}-textfield';
     
     & ~ .#{$component}-label,
     & ~ .#{$component}-leading-icon,
-    & ~ .#{$component}-trailing-icon {
+    & ~ .#{$component}-trailing-icon,
+    & ~ .#{$component}-prefix,
+    & ~ .#{$component}-suffix {
       color: t.color('on-surface');
       opacity: 0.38;
     }
@@ -183,6 +273,13 @@ $component: '#{base.$prefix}-textfield';
     &-label {
       transition: none;
     }
+    
+    &-prefix,
+    &-suffix,
+    &-leading-icon,
+    &-trailing-icon {
+      transition: none;
+    }
   }
   
   // RTL support
@@ -198,6 +295,16 @@ $component: '#{base.$prefix}-textfield';
       margin-right: 4px;
     }
     
+    &-prefix {
+      left: auto;
+      right: 16px;
+    }
+    
+    &-suffix {
+      right: auto;
+      left: 16px;
+    }
+    
     &-leading-icon {
       left: auto;
       right: 12px;
@@ -208,6 +315,28 @@ $component: '#{base.$prefix}-textfield';
       left: 12px;
     }
     
+    &--with-prefix {
+      .#{$component}-label {
+        left: auto;
+        // Default value - will be overridden by JS for precise positioning
+        right: 48px;
+      }
+      
+      .#{$component}-input {
+        padding-left: 16px;
+        // Default value - will be overridden by JS for precise padding
+        padding-right: 48px;
+      }
+    }
+    
+    &--with-suffix {
+      .#{$component}-input {
+        padding-right: 16px;
+        // Default value - will be overridden by JS for precise padding
+        padding-left: 48px;
+      }
+    }
+    
     &--with-leading-icon {
       .#{$component}-label {
         left: auto;
@@ -218,6 +347,25 @@ $component: '#{base.$prefix}-textfield';
         padding-left: 16px;
         padding-right: 44px;
       }
+      
+      &.#{$component}--with-prefix {
+        .#{$component}-prefix {
+          left: auto;
+          right: 44px;
+        }
+        
+        .#{$component}-label {
+          left: auto;
+          // Default value - will be overridden by JS for precise positioning
+          right: 76px;
+        }
+        
+        .#{$component}-input {
+          padding-left: 16px;
+          // Default value - will be overridden by JS for precise padding
+          padding-right: 76px;
+        }
+      }
     }
     
     &--with-trailing-icon {
@@ -225,6 +373,19 @@ $component: '#{base.$prefix}-textfield';
         padding-right: 16px;
         padding-left: 44px;
       }
+      
+      &.#{$component}--with-suffix {
+        .#{$component}-suffix {
+          right: auto;
+          left: 44px;
+        }
+        
+        .#{$component}-input {
+          padding-right: 16px;
+          // Default value - will be overridden by JS for precise padding
+          padding-left: 76px;
+        }
+      }
     }
   }
   
@@ -273,8 +434,20 @@ $component: '#{base.$prefix}-textfield';
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
       transform: translateY(-95%) scale(0.75);
+      // Don't specify left position here - let JS handle it
+    }
+    
+    // Position adjustments for prefix/suffix when in filled focused/populated state
+    &.mtrl-textfield--with-prefix,
+    &.mtrl-textfield--with-suffix {
+      &:not(.#{$component}--empty),
+      &.#{$component}--focused {
+        .#{$component}-prefix,
+        .#{$component}-suffix {
+          top: 34px; // Align with input text when focused or populated
+        }
+      }
     }
-
     // Focus state
     &.#{$component}--focused {    
       .#{$component}-label {
@@ -286,13 +459,6 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
-    // // Hover state
-    // &:hover {    
-    //   .#{$component}-label {
-    //     color: t.color('primary');
-    //   }
-    // }
-    
     // Error state
     &.#{$component}--error {    
       &::before {
@@ -315,6 +481,19 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
+    // Prefix/suffix adjustments for filled variant
+    &.#{$component}--with-prefix {
+      .#{$component}-prefix {
+        top: 28px; // Align with input text in filled variant - default state
+      }
+    }
+    
+    &.#{$component}--with-suffix {
+      .#{$component}-suffix {
+        top: 28px; // Align with input text in filled variant - default state
+      }
+    }
+    
     // Icon adjustments for filled variant
     &.#{$component}--with-leading-icon {
       .#{$component}-input {
@@ -325,18 +504,23 @@ $component: '#{base.$prefix}-textfield';
         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;
       }
+    
     }
     
+    // Populated field (not empty) or focused field label position
+    &:not(.#{$component}--empty) .#{$component}-label,
+    &.#{$component}--focused .#{$component}-label {
+      // Important change: For outlined variant, when focused/populated
+      // we want to reset the left position back to default (or to JS calculated equivalent)
+      // to handle the label moving up above the field
+      // The JS will handle special positioning depending on if it's prefixed
+      left: 16px;
+    }
+
+
     &.#{$component}--with-trailing-icon {
       .#{$component}-input {
         padding-right: 44px;
@@ -363,12 +547,6 @@ $component: '#{base.$prefix}-textfield';
           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 {
@@ -434,6 +612,11 @@ $component: '#{base.$prefix}-textfield';
     &.#{$component}--focused .#{$component}-label {
       padding: 0 4px;
       transform: translateY(-147%) scale(0.75);
+      // Important change: For outlined variant, when focused/populated
+      // we want to reset the left position back to default (or to JS calculated equivalent)
+      // to handle the label moving up above the field
+      // The JS will handle special positioning depending on if it's prefixed
+      left: 12px;
     }
 
     // Focus state
@@ -473,6 +656,19 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
+    // Prefix/suffix vertical alignment for outlined variant
+    &.#{$component}--with-prefix {
+      .#{$component}-prefix {
+        top: 50%; // Centered vertically in outlined variant
+      }
+    }
+    
+    &.#{$component}--with-suffix {
+      .#{$component}-suffix {
+        top: 50%; // Centered vertically in outlined variant
+      }
+    }
+    
     // Icon adjustments for outlined variant
     &.#{$component}--with-leading-icon {
       .#{$component}-input {
@@ -483,10 +679,11 @@ $component: '#{base.$prefix}-textfield';
         left: 44px;
       }
       
+      // Important change: For outlined variant, when focused/populated
+      // we still reset to 12px position (default)
       &:not(.#{$component}--empty) .#{$component}-label,
       &.#{$component}--focused .#{$component}-label {
-        // For outlined variant, move label to default position
-        left: 13px;
+        left: 12px;
       }
     }
     
@@ -501,7 +698,7 @@ $component: '#{base.$prefix}-textfield';
       &:not(.#{$component}--empty) .#{$component}-label,
       &.#{$component}--focused .#{$component}-label {
         left: auto;
-        right: 13px;
+        right: 12px;
       }
       
       &.#{$component}--focused .#{$component}-label {
@@ -525,8 +722,8 @@ $component: '#{base.$prefix}-textfield';
         
         &:not(.#{$component}--empty) .#{$component}-label,
         &.#{$component}--focused .#{$component}-label {
-          // For outlined variant in RTL, move label to default position
-          right: 13px;
+          // Reset to default value for focused state
+          right: 12px;
           left: auto;
         }
       }
@@ -549,19 +746,11 @@ $component: '#{base.$prefix}-textfield';
       padding-top: 12px;
     }
     
-    &--filled {
-      .#{$component}-input {
-
-      }
+    .#{$component}-prefix,
+    .#{$component}-suffix {
+      top: 28px;
     }
-
-    &--outlined {
-      .#{$component}-input {
-
-      }
-    }
-
-
+    
     .#{$component}-label {
       top: 24px;
     }
@@ -574,7 +763,9 @@ $component: '#{base.$prefix}-textfield';
     resize: vertical;
     
     & ~ .#{$component}-leading-icon,
-    & ~ .#{$component}-trailing-icon {
+    & ~ .#{$component}-trailing-icon,
+    & ~ .#{$component}-prefix,
+    & ~ .#{$component}-suffix {
       top: 20px;
       transform: none;
     }

package/src/styles/main.scss

@@ -34,6 +34,7 @@
 @use './components/menu' as menu;
 @use './components/slider' as slider;
 @use './components/switch' as switch;
+@use './components/select' as select;
 @use './components/tabs' as tabs;
 @use './components/top-app-bar' as top-app-bar;
 
@@ -44,7 +45,7 @@
 @use './components/card' as card;
 @use './components/carousel' as carousel;
 @use './components/checkbox' as checkbox;
-@use './components/chip' as chip;
+@use './components/chips' as chips;
 @use './components/datepicker' as datepicker;
 @use './components/dialog' as dialog;
 @use './components/divider' as divider;