mtrl 0.5.3 → 0.5.5

package/src/styles/components/_textfield.scss

@@ -10,1015 +10,1026 @@ $component: "#{base.$prefix}-textfield";
 
 // Autofill detection animations
 @keyframes onAutoFillStart {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes onAutoFillCancel {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 // ===== BASE STYLES =====
 .#{$component} {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  min-width: 210px;
-  // align-self: flex-start; // Prevents growing to fill the container's height
-  flex: 0 0 auto; // Don't grow or shrink; keep natural size
-  // Label
-  &-label {
-    @include m.typography("body-large");
-    user-select: none;
-    position: absolute;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    transform-origin: left top;
-    pointer-events: none;
-    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"),
-      left v.motion("duration-short4") v.motion("easing-emphasized");
-  }
-
-  // Input element
-  &-input {
-    @include m.typography("body-large");
-    @include m.shape("extra-small");
-    padding: 13px 16px;
-    width: 100%;
-    height: 56px;
-    color: t.color("on-surface");
-    border: 0;
-    appearance: none;
-    outline: none;
-
-    // Animation to detect autofill
-    animation-name: onAutoFillCancel;
-    animation-duration: 10ms;
-
-    // Transition to help detect autofill changes
-    transition: background-color 0s ease-out 50000000s;
-
-    &::placeholder {
-      color: transparent;
-    }
-
-    // Autofill styles
-    &:-webkit-autofill {
-      animation-name: onAutoFillStart;
-      animation-duration: 10ms;
-      -webkit-text-fill-color: t.color("on-surface");
-      transition: background-color 5000s ease-in-out 0s; // Long transition to keep the background
-
-      & ~ .#{$component}-label {
-        transform: translateY(-95%) scale(0.75);
-        background-color: t.color("surface");
-      }
-    }
-
-    // Firefox autofill
-    &:autofill {
-      color: t.color("on-surface");
-
-      & ~ .#{$component}-label {
-        transform: translateY(-95%) scale(0.75);
-        background-color: t.color("surface");
-      }
-    }
-
-    // Non-empty input should also float the label
-    &:not(:placeholder-shown) {
-      & ~ .#{$component}-label {
-        transform: translateY(-95%) scale(0.75);
-      }
-    }
-  }
-
-  // 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 {
-    opacity: 0.85;
-    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;
-    transition: top v.motion("duration-short4") v.motion("easing-emphasized"); // Add transition for top position
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  // Trailing icon
-  &-trailing-icon {
-    opacity: 0.85;
-    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;
-    transition: top v.motion("duration-short4") v.motion("easing-emphasized"); // Add transition for top position
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  // 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 {
-      left: 44px;
-    }
-
-    .#{$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
-  &--error {
-    border-color: t.color("error");
-
-    .#{$component}-label {
-      color: t.color("error");
-    }
-
-    .#{$component}-leading-icon,
-    .#{$component}-trailing-icon,
-    .#{$component}-prefix,
-    .#{$component}-suffix {
-      color: t.color("error");
-    }
-  }
-
-  // Disabled state
-  &--disabled {
-    .#{$component}-input {
-      opacity: 0.38;
-      border-color: t.color("on-surface");
-      background-color: t.alpha("on-surface", 0.04);
-      pointer-events: none;
-    }
-
-    .#{$component}-label {
-      color: t.color("on-surface");
-      opacity: 0.38;
-    }
-
-    .#{$component}-leading-icon,
-    .#{$component}-trailing-icon,
-    .#{$component}-prefix,
-    .#{$component}-suffix {
-      color: t.color("on-surface");
-      opacity: 0.38;
-    }
-  }
-
-  // Disabled state - legacy support for direct input disabled
-  &-input:disabled {
-    opacity: 0.38;
-    border-color: t.color("on-surface");
-    background-color: t.alpha("on-surface", 0.04);
-    pointer-events: none;
-
-    & ~ .#{$component}-label,
-    & ~ .#{$component}-leading-icon,
-    & ~ .#{$component}-trailing-icon,
-    & ~ .#{$component}-prefix,
-    & ~ .#{$component}-suffix {
-      color: t.color("on-surface");
-      opacity: 0.38;
-    }
-  }
-
-  // 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");
-
-    &--error {
-      color: t.color("error");
-    }
-  }
-
-  // Required indicator
-  &-required {
-    color: t.color("error");
-    margin-left: 4px;
-  }
-
-  // Accessibility
-  @include m.reduced-motion {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    // min-width: 210px;
+    // align-self: flex-start; // Prevents growing to fill the container's height
+    flex: 0 0 auto; // Don't grow or shrink; keep natural size
+    // Label
     &-label {
-      transition: none;
-    }
+        @include m.typography("body-large");
+        user-select: none;
+        position: absolute;
+        left: 16px;
+        top: 50%;
+        transform: translateY(-50%);
+        transform-origin: left top;
+        pointer-events: none;
+        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"),
+            left v.motion("duration-short4") v.motion("easing-emphasized");
+    }
+
+    // Input element
+    &-input {
+        @include m.typography("body-large");
+        @include m.shape("extra-small");
+        padding: 13px 16px;
+        width: 100%;
+        height: 56px;
+        color: t.color("on-surface");
+        border: 0;
+        appearance: none;
+        outline: none;
+
+        // Animation to detect autofill
+        animation-name: onAutoFillCancel;
+        animation-duration: 10ms;
+
+        // Transition to help detect autofill changes
+        transition: background-color 0s ease-out 50000000s;
+
+        &::placeholder {
+            color: transparent;
+        }
 
-    &-prefix,
-    &-suffix,
-    &-leading-icon,
-    &-trailing-icon {
-      transition: none;
-    }
-  }
+        // Autofill styles
+        &:-webkit-autofill {
+            animation-name: onAutoFillStart;
+            animation-duration: 10ms;
+            -webkit-text-fill-color: t.color("on-surface");
+            transition: background-color 5000s ease-in-out 0s; // Long transition to keep the background
+
+            & ~ .#{$component}-label {
+                transform: translateY(-95%) scale(0.75);
+                background-color: t.color("surface");
+            }
+        }
 
-  // RTL support
-  @include m.rtl {
-    &-label {
-      left: auto;
-      right: 16px;
-      transform-origin: right top;
-    }
+        // Firefox autofill
+        &:autofill {
+            color: t.color("on-surface");
 
-    &-required {
-      margin-left: 0;
-      margin-right: 4px;
-    }
+            & ~ .#{$component}-label {
+                transform: translateY(-95%) scale(0.75);
+                background-color: t.color("surface");
+            }
+        }
 
-    &-prefix {
-      left: auto;
-      right: 16px;
+        // Non-empty input should also float the label
+        &:not(:placeholder-shown) {
+            & ~ .#{$component}-label {
+                transform: translateY(-95%) scale(0.75);
+            }
+        }
     }
 
+    // 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 {
-      right: auto;
-      left: 16px;
-    }
-
+        @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 {
-      left: auto;
-      right: 12px;
+        opacity: 0.85;
+        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;
+        transition: top v.motion("duration-short4")
+            v.motion("easing-emphasized"); // Add transition for top position
+
+        svg {
+            width: 20px;
+            height: 20px;
+        }
     }
 
+    // Trailing icon
     &-trailing-icon {
-      right: auto;
-      left: 12px;
+        opacity: 0.85;
+        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;
+        transition: top v.motion("duration-short4")
+            v.motion("easing-emphasized"); // Add transition for top position
+
+        svg {
+            width: 20px;
+            height: 20px;
+        }
     }
 
+    // Adjustments when prefix/suffix are present - base case styling
+    // JavaScript will handle dynamic sizing, these are fallbacks
     &--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;
-      }
+        .#{$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 {
-        padding-right: 16px;
-        // Default value - will be overridden by JS for precise padding
-        padding-left: 48px;
-      }
+        .#{$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 {
-        left: auto;
-        right: 44px;
-      }
-
-      .#{$component}-input {
-        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;
+            left: 44px;
         }
 
         .#{$component}-input {
-          padding-left: 16px;
-          // Default value - will be overridden by JS for precise padding
-          padding-right: 76px;
+            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: 16px;
-        padding-left: 44px;
-      }
-
-      &.#{$component}--with-suffix {
-        .#{$component}-suffix {
-          right: auto;
-          left: 44px;
+        .#{$component}-input {
+            padding-right: 44px;
         }
 
-        .#{$component}-input {
-          padding-right: 16px;
-          // Default value - will be overridden by JS for precise padding
-          padding-left: 76px;
+        // 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;
+            }
         }
-      }
     }
-  }
 
-  // ===== FILLED VARIANT =====
-  &--filled {
-    .#{$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);
-
-      // Autofill styles for filled variant
-      &:-webkit-autofill {
-        border-radius: f.get-shape("extra-small") f.get-shape("extra-small") 0 0;
+    // Error state
+    &--error {
+        border-color: t.color("error");
 
-        & ~ .#{$component}-label {
-          transform: translateY(-95%) scale(0.75);
-          color: t.color("on-surface-variant");
+        .#{$component}-label {
+            color: t.color("error");
         }
-      }
 
-      &:autofill {
-        & ~ .#{$component}-label {
-          transform: translateY(-95%) scale(0.75);
-          color: t.color("on-surface-variant");
+        .#{$component}-leading-icon,
+        .#{$component}-trailing-icon,
+        .#{$component}-prefix,
+        .#{$component}-suffix {
+            color: t.color("error");
         }
-      }
-    }
-
-    &::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 {
-      transform: translateY(-95%) scale(0.75);
-      // Don't specify left position here - let JS handle it
-    }
+    // Disabled state
+    &--disabled {
+        .#{$component}-input {
+            opacity: 0.38;
+            border-color: t.color("on-surface");
+            background-color: t.alpha("on-surface", 0.04);
+            pointer-events: none;
+        }
 
-    // CSS-only fallback for when input has value (works without JS)
-    .#{$component}-input:not(:placeholder-shown) ~ .#{$component}-label {
-      transform: translateY(-95%) scale(0.75);
-    }
+        .#{$component}-label {
+            color: t.color("on-surface");
+            opacity: 0.38;
+        }
 
-    // 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}-leading-icon,
+        .#{$component}-trailing-icon,
         .#{$component}-prefix,
         .#{$component}-suffix {
-          top: 34px; // Align with input text when focused or populated
+            color: t.color("on-surface");
+            opacity: 0.38;
         }
-      }
     }
-    // Focus state
-    &.#{$component}--focused {
-      .#{$component}-label {
-        color: t.color("primary");
-      }
 
-      &::before {
-        opacity: 1;
-      }
+    // Disabled state - legacy support for direct input disabled
+    &-input:disabled {
+        opacity: 0.38;
+        border-color: t.color("on-surface");
+        background-color: t.alpha("on-surface", 0.04);
+        pointer-events: none;
+
+        & ~ .#{$component}-label,
+        & ~ .#{$component}-leading-icon,
+        & ~ .#{$component}-trailing-icon,
+        & ~ .#{$component}-prefix,
+        & ~ .#{$component}-suffix {
+            color: t.color("on-surface");
+            opacity: 0.38;
+        }
     }
 
-    // Error state
-    &.#{$component}--error {
-      &::before {
-        opacity: 1;
-        background-color: t.color("error");
-      }
+    // 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");
+
+        &--error {
+            color: t.color("error");
+        }
+    }
 
-      .#{$component}-label {
+    // Required indicator
+    &-required {
         color: t.color("error");
-      }
+        margin-left: 4px;
     }
 
-    // Disabled state
-    &.#{$component}--disabled {
-      border-bottom-color: t.alpha("on-surface", 0.38);
-      pointer-events: none;
+    // Accessibility
+    @include m.reduced-motion {
+        &-label {
+            transition: none;
+        }
 
-      .#{$component}-input {
-        background-color: t.alpha("on-surface", 0.04);
-      }
+        &-prefix,
+        &-suffix,
+        &-leading-icon,
+        &-trailing-icon {
+            transition: none;
+        }
     }
 
-    // Prefix/suffix adjustments for filled variant
-    &.#{$component}--with-prefix {
-      .#{$component}-prefix {
-        top: 28px; // Align with input text in filled variant - default state
-      }
-    }
+    // RTL support
+    @include m.rtl {
+        &-label {
+            left: auto;
+            right: 16px;
+            transform-origin: right top;
+        }
 
-    &.#{$component}--with-suffix {
-      .#{$component}-suffix {
-        top: 28px; // Align with input text in filled variant - default state
-      }
-    }
+        &-required {
+            margin-left: 0;
+            margin-right: 4px;
+        }
 
-    // Icon adjustments for filled variant
-    &.#{$component}--with-leading-icon {
-      .#{$component}-input {
-        padding: 20px 16px 7px 44px;
-      }
+        &-prefix {
+            left: auto;
+            right: 16px;
+        }
 
-      .#{$component}-label {
-        left: 44px;
-      }
+        &-suffix {
+            right: auto;
+            left: 16px;
+        }
 
-      .#{$component}-leading-icon {
-        top: 28px;
-      }
-    }
+        &-leading-icon {
+            left: auto;
+            right: 12px;
+        }
 
-    // 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;
-    }
+        &-trailing-icon {
+            right: auto;
+            left: 12px;
+        }
 
-    &.#{$component}--with-trailing-icon {
-      .#{$component}-input {
-        padding-right: 44px;
-      }
+        &--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;
+            }
+        }
 
-      .#{$component}-trailing-icon {
-        top: 28px;
-      }
-    }
+        &--with-suffix {
+            .#{$component}-input {
+                padding-right: 16px;
+                // Default value - will be overridden by JS for precise padding
+                padding-left: 48px;
+            }
+        }
 
-    // RTL support
-    @include m.rtl {
-      .#{$component}-label {
-        left: auto;
-        right: 16px;
-      }
+        &--with-leading-icon {
+            .#{$component}-label {
+                left: auto;
+                right: 44px;
+            }
+
+            .#{$component}-input {
+                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;
+                }
+            }
+        }
 
-      &.#{$component}--with-leading-icon {
-        .#{$component}-input {
-          padding: 20px 44px 7px 16px;
+        &--with-trailing-icon {
+            .#{$component}-input {
+                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;
+                }
+            }
         }
+    }
 
+    // ===== FILLED VARIANT =====
+    &--filled {
         .#{$component}-label {
-          left: auto;
-          right: 44px;
+            opacity: 0.6;
         }
-      }
-
-      &.#{$component}--with-trailing-icon {
         .#{$component}-input {
-          padding-right: 16px;
-          padding-left: 44px;
+            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);
+
+            // Autofill styles for filled variant
+            &:-webkit-autofill {
+                border-radius: f.get-shape("extra-small")
+                    f.get-shape("extra-small") 0 0;
+
+                & ~ .#{$component}-label {
+                    transform: translateY(-95%) scale(0.75);
+                    color: t.color("on-surface-variant");
+                }
+            }
+
+            &:autofill {
+                & ~ .#{$component}-label {
+                    transform: translateY(-95%) scale(0.75);
+                    color: t.color("on-surface-variant");
+                }
+            }
         }
-      }
-    }
-  }
-
-  // ===== OUTLINED VARIANT =====
-  &--outlined {
-    background-color: inherit;
-    border-radius: f.get-shape("extra-small");
-    @include m.motion-transition(border-color);
-
-    .#{$component}-input {
-      background-color: transparent;
-      padding: 12px 15px 13px;
-      border: 1px solid t.color("outline");
-      @include m.motion-transition(padding);
-
-      // Autofill styles for outlined variant
-      &:-webkit-autofill {
-        border-radius: f.get-shape("extra-small");
 
-        & ~ .#{$component}-label {
-          background-color: t.color("surface");
-          transform: translateY(-145%) scale(0.75);
+        &::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;
         }
-      }
 
-      &:autofill {
-        & ~ .#{$component}-label {
-          background-color: t.color("surface");
-          transform: translateY(-145%) scale(0.75);
+        // Populated field (not empty) or focused field label position
+        &: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
         }
-      }
-    }
 
-    .#{$component}-label {
-      background-color: inherit;
-      padding: 0 4px;
-      left: 14px;
-      top: 50%;
-    }
+        // CSS-only fallback for when input has value (works without JS)
+        .#{$component}-input:not(:placeholder-shown) ~ .#{$component}-label {
+            transform: translateY(-95%) scale(0.75);
+        }
 
-    &::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;
-    }
+        // 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 {
+                color: t.color("primary");
+            }
 
-    // Populated field (not empty) or focused field label position
-    &:not(.#{$component}--empty) .#{$component}-label,
-    &.#{$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: 14px;
-    }
+            &::before {
+                opacity: 1;
+            }
+        }
 
-    // CSS-only fallback for when input has value (works without JS)
-    .#{$component}-input:not(:placeholder-shown) ~ .#{$component}-label {
-      padding: 0 4px;
-      transform: translateY(-147%) scale(0.75);
-      left: 14px;
-      background-color: t.color("surface");
-    }
+        // Error state
+        &.#{$component}--error {
+            &::before {
+                opacity: 1;
+                background-color: t.color("error");
+            }
 
-    // Focus state
-    &.#{$component}--focused {
-      &::before {
-        opacity: 1;
-        border-width: 2px;
-      }
-      // &:hover {
-      //   &::before {
+            .#{$component}-label {
+                color: t.color("error");
+            }
+        }
 
-      //   }
-      // }
+        // Disabled state
+        &.#{$component}--disabled {
+            border-bottom-color: t.alpha("on-surface", 0.38);
+            pointer-events: none;
 
-      .#{$component}-label {
-        color: t.color("primary");
-      }
-    }
+            .#{$component}-input {
+                background-color: t.alpha("on-surface", 0.04);
+            }
+        }
 
-    // Error state
-    &.#{$component}--error {
-      &::before {
-        opacity: 1;
-        border: 2px solid t.color("error");
-      }
+        // Prefix/suffix adjustments for filled variant
+        &.#{$component}--with-prefix {
+            .#{$component}-prefix {
+                top: 28px; // Align with input text in filled variant - default state
+            }
+        }
 
-      .#{$component}-label {
-        color: t.color("error");
-      }
-    }
+        &.#{$component}--with-suffix {
+            .#{$component}-suffix {
+                top: 28px; // Align with input text in filled variant - default state
+            }
+        }
 
-    // Disabled state
-    &.#{$component}--disabled {
-      pointer-events: none;
-      &::before {
-        opacity: 1;
-        border: 1px solid t.alpha("on-surface", 0.38);
-      }
-    }
+        // Icon adjustments for filled variant
+        &.#{$component}--with-leading-icon {
+            .#{$component}-input {
+                padding: 20px 16px 7px 44px;
+            }
 
-    // Prefix/suffix vertical alignment for outlined variant
-    &.#{$component}--with-prefix {
-      .#{$component}-prefix {
-        top: 50%; // Centered vertically in outlined variant
-      }
-    }
+            .#{$component}-label {
+                left: 44px;
+            }
 
-    &.#{$component}--with-suffix {
-      .#{$component}-suffix {
-        top: 50%; // Centered vertically in outlined variant
-      }
-    }
+            .#{$component}-leading-icon {
+                top: 28px;
+            }
+        }
 
-    // Icon adjustments for outlined variant
-    &.#{$component}--with-leading-icon {
-      .#{$component}-input {
-        padding-left: 44px;
-      }
-
-      .#{$component}-label {
-        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 {
-        left: 14px;
-      }
-    }
+        // 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;
-      }
-    }
+        &.#{$component}--with-trailing-icon {
+            .#{$component}-input {
+                padding-right: 44px;
+            }
 
-    // RTL support
-    @include m.rtl {
-      &:not(.#{$component}--empty) .#{$component}-label,
-      &.#{$component}--focused .#{$component}-label {
-        left: auto;
-        right: 12px;
-      }
+            .#{$component}-trailing-icon {
+                top: 28px;
+            }
+        }
 
-      &.#{$component}--focused .#{$component}-label {
-        right: 12px;
-      }
+        // 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;
+                }
+            }
+
+            &.#{$component}--with-trailing-icon {
+                .#{$component}-input {
+                    padding-right: 16px;
+                    padding-left: 44px;
+                }
+            }
+        }
+    }
 
-      &.#{$component}--error .#{$component}-label {
-        right: 12px;
-      }
+    // ===== OUTLINED VARIANT =====
+    &--outlined {
+        background-color: inherit;
+        border-radius: f.get-shape("extra-small");
+        @include m.motion-transition(border-color);
 
-      &.#{$component}--with-leading-icon {
         .#{$component}-input {
-          padding-left: 16px;
-          padding-right: 44px;
+            background-color: transparent;
+            padding: 12px 15px 13px;
+            border: 1px solid t.color("outline");
+            @include m.motion-transition(padding);
+
+            // Autofill styles for outlined variant
+            &:-webkit-autofill {
+                border-radius: f.get-shape("extra-small");
+
+                & ~ .#{$component}-label {
+                    background-color: t.color("surface");
+                    transform: translateY(-145%) scale(0.75);
+                }
+            }
+
+            &:autofill {
+                & ~ .#{$component}-label {
+                    background-color: t.color("surface");
+                    transform: translateY(-145%) scale(0.75);
+                }
+            }
         }
 
         .#{$component}-label {
-          left: auto;
-          right: 44px;
+            opacity: 0.5;
+            background-color: inherit;
+            padding: 0 4px;
+            left: 14px;
+            top: 50%;
+        }
+
+        &::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 {
-          // Reset to default value for focused state
-          right: 12px;
-          left: auto;
+            padding: 0 4px;
+            opacity: 1;
+            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: 14px;
         }
-      }
 
-      &.#{$component}--with-trailing-icon {
-        .#{$component}-input {
-          padding-right: 16px;
-          padding-left: 44px;
+        // CSS-only fallback for when input has value (works without JS)
+        .#{$component}-input:not(:placeholder-shown) ~ .#{$component}-label {
+            padding: 0 4px;
+            transform: translateY(-147%) scale(0.75);
+            left: 14px;
+            background-color: t.color("surface");
         }
-      }
-    }
-  }
-
-  // Multiline styles
-  &--multiline {
-    .#{$component}-input {
-      min-height: 100px;
-      height: auto;
-      resize: vertical;
-      padding-top: 12px;
-    }
 
-    .#{$component}-prefix,
-    .#{$component}-suffix {
-      top: 28px;
-    }
+        // Focus state
+        &.#{$component}--focused {
+            &::before {
+                opacity: 1;
+                border-width: 2px;
+            }
+            // &:hover {
+            //   &::before {
+
+            //   }
+            // }
+
+            .#{$component}-label {
+                color: t.color("primary");
+            }
+        }
 
-    .#{$component}-label {
-      top: 24px;
-    }
-  }
-
-  // Support for multiline inputs
-  &-input[type="multiline"] {
-    min-height: 100px;
-    height: auto; // Allow height to adjust based on content
-    max-height: none; // Remove max-height constraint from regular inputs
-    flex-shrink: 1; // Allow some shrinking for multiline
-
-    & ~ .#{$component}-leading-icon,
-    & ~ .#{$component}-trailing-icon,
-    & ~ .#{$component}-prefix,
-    & ~ .#{$component}-suffix {
-      top: 20px;
-      transform: none;
-    }
-  }
-
-  // ===== DENSITY VARIANTS =====
-  // Compact density (40px height)
-  &--density-compact {
-    .#{$component}-input {
-      height: 40px;
-      padding: 8px 16px;
-      @include m.typography("body-medium"); // Slightly smaller text
-    }
+        // Error state
+        &.#{$component}--error {
+            &::before {
+                opacity: 1;
+                border: 2px solid t.color("error");
+            }
 
-    // Adjust label position for compact
-    .#{$component}-label {
-      @include m.typography("body-medium");
-    }
+            .#{$component}-label {
+                color: t.color("error");
+            }
+        }
 
-    // Adjust icon positions for compact height
-    .#{$component}-leading-icon,
-    .#{$component}-trailing-icon {
-      width: 20px;
-      height: 20px;
+        // Disabled state
+        &.#{$component}--disabled {
+            pointer-events: none;
+            &::before {
+                opacity: 1;
+                border: 1px solid t.alpha("on-surface", 0.38);
+            }
+        }
 
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
+        // Prefix/suffix vertical alignment for outlined variant
+        &.#{$component}--with-prefix {
+            .#{$component}-prefix {
+                top: 50%; // Centered vertically in outlined variant
+            }
+        }
 
-    // Adjust prefix/suffix position for compact
-    .#{$component}-prefix,
-    .#{$component}-suffix {
-      @include m.typography("body-medium");
-    }
+        &.#{$component}--with-suffix {
+            .#{$component}-suffix {
+                top: 50%; // Centered vertically in outlined variant
+            }
+        }
 
-    // Filled variant with compact density
-    &.#{$component}--filled {
-      .#{$component}-input {
-        padding: 12px 16px 4px; // Adjusted for filled variant
-      }
-
-      // Populated/focused label position
-      &:not(.#{$component}--empty) .#{$component}-label,
-      &.#{$component}--focused .#{$component}-label {
-        transform: translateY(-90%) scale(0.75); // Adjusted for compact height
-      }
-
-      // Adjust prefix/suffix position when focused/populated
-      &.mtrl-textfield--with-prefix,
-      &.mtrl-textfield--with-suffix {
-        &:not(.#{$component}--empty),
-        &.#{$component}--focused {
-          .#{$component}-prefix,
-          .#{$component}-suffix {
-            top: 22px; // Adjusted for compact filled variant
-          }
-        }
-      }
-
-      // Adjust icons for filled compact
-      .#{$component}-leading-icon,
-      .#{$component}-trailing-icon {
-        top: 20px; // Adjusted for compact filled
-      }
-    }
+        // Icon adjustments for outlined variant
+        &.#{$component}--with-leading-icon {
+            .#{$component}-input {
+                padding-left: 44px;
+            }
+
+            .#{$component}-label {
+                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 {
+                left: 14px;
+            }
+        }
 
-    // Outlined variant with compact density
-    &.#{$component}--outlined {
-      .#{$component}-input {
-        padding: 8px 15px 9px;
-      }
-
-      // Focused/populated position
-      &:not(.#{$component}--empty) .#{$component}-label,
-      &.#{$component}--focused .#{$component}-label {
-        transform: translateY(-130%) scale(0.75); // Same as default, scale is important
-      }
-    }
+        &.#{$component}--with-trailing-icon {
+            .#{$component}-input {
+                padding-right: 44px;
+            }
+        }
 
-    // Multiline with compact density
-    &.#{$component}--multiline {
-      .#{$component}-input {
-        min-height: 40px;
-        padding: 8px 16px;
-      }
+        // RTL support
+        @include m.rtl {
+            &:not(.#{$component}--empty) .#{$component}-label,
+            &.#{$component}--focused .#{$component}-label {
+                left: auto;
+                right: 12px;
+            }
+
+            &.#{$component}--focused .#{$component}-label {
+                right: 12px;
+            }
+
+            &.#{$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 {
+                    // Reset to default value for focused state
+                    right: 12px;
+                    left: auto;
+                }
+            }
+
+            &.#{$component}--with-trailing-icon {
+                .#{$component}-input {
+                    padding-right: 16px;
+                    padding-left: 44px;
+                }
+            }
+        }
     }
 
-    // Adjust element positions for compact with icons
-    &.#{$component}--with-leading-icon {
-      .#{$component}-label {
-        left: 40px; // Reduced from 44px
-      }
-
-      .#{$component}-input {
-        padding-left: 40px;
-      }
-
-      &.#{$component}--with-prefix {
-        .#{$component}-prefix {
-          left: 40px;
+    // Multiline styles
+    &--multiline {
+        .#{$component}-input {
+            min-height: 100px;
+            height: auto;
+            resize: vertical;
+            padding-top: 12px;
         }
 
-        .#{$component}-label {
-          left: 68px; // Adjusted for compact
+        .#{$component}-prefix,
+        .#{$component}-suffix {
+            top: 28px;
         }
 
-        .#{$component}-input {
-          padding-left: 68px;
+        .#{$component}-label {
+            top: 24px;
         }
-      }
     }
 
-    &.#{$component}--with-trailing-icon {
-      .#{$component}-input {
-        padding-right: 40px;
-      }
+    // Support for multiline inputs
+    &-input[type="multiline"] {
+        min-height: 100px;
+        height: auto; // Allow height to adjust based on content
+        max-height: none; // Remove max-height constraint from regular inputs
+        flex-shrink: 1; // Allow some shrinking for multiline
 
-      &.#{$component}--with-suffix {
-        .#{$component}-suffix {
-          right: 40px;
+        & ~ .#{$component}-leading-icon,
+        & ~ .#{$component}-trailing-icon,
+        & ~ .#{$component}-prefix,
+        & ~ .#{$component}-suffix {
+            top: 20px;
+            transform: none;
         }
+    }
 
+    // ===== DENSITY VARIANTS =====
+    // Compact density (40px height)
+    &--density-compact {
         .#{$component}-input {
-          padding-right: 68px;
+            height: 40px;
+            padding: 8px 16px;
+            @include m.typography("body-medium"); // Slightly smaller text
         }
-      }
-    }
 
-    // RTL adjustments for compact density
-    @include m.rtl {
-      &.#{$component}--with-leading-icon {
+        // Adjust label position for compact
         .#{$component}-label {
-          left: auto;
-          right: 40px;
+            @include m.typography("body-medium");
         }
 
-        .#{$component}-input {
-          padding-left: 16px;
-          padding-right: 40px;
+        // Adjust icon positions for compact height
+        .#{$component}-leading-icon,
+        .#{$component}-trailing-icon {
+            width: 20px;
+            height: 20px;
+
+            svg {
+                width: 16px;
+                height: 16px;
+            }
         }
 
-        &.#{$component}--with-prefix {
-          .#{$component}-prefix {
-            left: auto;
-            right: 40px;
-          }
+        // Adjust prefix/suffix position for compact
+        .#{$component}-prefix,
+        .#{$component}-suffix {
+            @include m.typography("body-medium");
+        }
 
-          .#{$component}-label {
-            left: auto;
-            right: 68px;
-          }
+        // Filled variant with compact density
+        &.#{$component}--filled {
+            .#{$component}-input {
+                padding: 12px 16px 4px; // Adjusted for filled variant
+            }
+
+            // Populated/focused label position
+            &:not(.#{$component}--empty) .#{$component}-label,
+            &.#{$component}--focused .#{$component}-label {
+                transform: translateY(-90%) scale(0.75); // Adjusted for compact height
+            }
+
+            // Adjust prefix/suffix position when focused/populated
+            &.mtrl-textfield--with-prefix,
+            &.mtrl-textfield--with-suffix {
+                &:not(.#{$component}--empty),
+                &.#{$component}--focused {
+                    .#{$component}-prefix,
+                    .#{$component}-suffix {
+                        top: 22px; // Adjusted for compact filled variant
+                    }
+                }
+            }
+
+            // Adjust icons for filled compact
+            .#{$component}-leading-icon,
+            .#{$component}-trailing-icon {
+                top: 20px; // Adjusted for compact filled
+            }
+        }
 
-          .#{$component}-input {
-            padding-left: 16px;
-            padding-right: 68px;
-          }
+        // Outlined variant with compact density
+        &.#{$component}--outlined {
+            .#{$component}-input {
+                padding: 9px 15px 8px;
+            }
+
+            // Focused/populated position
+            &:not(.#{$component}--empty) .#{$component}-label,
+            &.#{$component}--focused .#{$component}-label {
+                transform: translateY(-130%) scale(0.75); // Same as default, scale is important
+            }
         }
-      }
 
-      &.#{$component}--with-trailing-icon {
-        .#{$component}-input {
-          padding-right: 16px;
-          padding-left: 40px;
+        // Multiline with compact density
+        &.#{$component}--multiline {
+            .#{$component}-input {
+                min-height: 40px;
+                padding: 8px 16px;
+            }
         }
 
-        &.#{$component}--with-suffix {
-          .#{$component}-suffix {
-            right: auto;
-            left: 40px;
-          }
+        // Adjust element positions for compact with icons
+        &.#{$component}--with-leading-icon {
+            .#{$component}-label {
+                left: 40px; // Reduced from 44px
+            }
+
+            .#{$component}-input {
+                padding-left: 40px;
+            }
+
+            &.#{$component}--with-prefix {
+                .#{$component}-prefix {
+                    left: 40px;
+                }
+
+                .#{$component}-label {
+                    left: 68px; // Adjusted for compact
+                }
+
+                .#{$component}-input {
+                    padding-left: 68px;
+                }
+            }
+        }
+
+        &.#{$component}--with-trailing-icon {
+            .#{$component}-input {
+                padding-right: 40px;
+            }
+
+            &.#{$component}--with-suffix {
+                .#{$component}-suffix {
+                    right: 40px;
+                }
+
+                .#{$component}-input {
+                    padding-right: 68px;
+                }
+            }
+        }
 
-          .#{$component}-input {
-            padding-right: 16px;
-            padding-left: 68px;
-          }
+        // RTL adjustments for compact density
+        @include m.rtl {
+            &.#{$component}--with-leading-icon {
+                .#{$component}-label {
+                    left: auto;
+                    right: 40px;
+                }
+
+                .#{$component}-input {
+                    padding-left: 16px;
+                    padding-right: 40px;
+                }
+
+                &.#{$component}--with-prefix {
+                    .#{$component}-prefix {
+                        left: auto;
+                        right: 40px;
+                    }
+
+                    .#{$component}-label {
+                        left: auto;
+                        right: 68px;
+                    }
+
+                    .#{$component}-input {
+                        padding-left: 16px;
+                        padding-right: 68px;
+                    }
+                }
+            }
+
+            &.#{$component}--with-trailing-icon {
+                .#{$component}-input {
+                    padding-right: 16px;
+                    padding-left: 40px;
+                }
+
+                &.#{$component}--with-suffix {
+                    .#{$component}-suffix {
+                        right: auto;
+                        left: 40px;
+                    }
+
+                    .#{$component}-input {
+                        padding-right: 16px;
+                        padding-left: 68px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }