mtrl 0.3.7 → 0.3.9

package/src/styles/components/_textfield.scss

@@ -1,773 +0,0 @@
-// src/styles/components/_textfield.scss
-@use '../../styles/abstract/base' as base;
-@use '../../styles/abstract/variables' as v;
-@use '../../styles/abstract/functions' as f;
-@use '../../styles/abstract/mixins' as m;
-@use '../../styles/abstract/theme' as t;
-
-// Define the component once
-$component: '#{base.$prefix}-textfield';
-
-// ===== BASE STYLES =====
-.#{$component} {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  min-width: 210px;
-  
-  // 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;
-    
-    &::placeholder {
-      color: transparent;
-    }
-
-    // Autofill styles
-    &:-webkit-autofill {
-      -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');
-      }
-    }
-  }
-  
-  // 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;
-    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 {
-    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
-  &-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 {
-    &-label {
-      transition: none;
-    }
-    
-    &-prefix,
-    &-suffix,
-    &-leading-icon,
-    &-trailing-icon {
-      transition: none;
-    }
-  }
-  
-  // RTL support
-  @include m.rtl {
-    &-label {
-      left: auto;
-      right: 16px;
-      transform-origin: right top;
-    }
-    
-    &-required {
-      margin-left: 0;
-      margin-right: 4px;
-    }
-    
-    &-prefix {
-      left: auto;
-      right: 16px;
-    }
-    
-    &-suffix {
-      right: auto;
-      left: 16px;
-    }
-    
-    &-leading-icon {
-      left: auto;
-      right: 12px;
-    }
-    
-    &-trailing-icon {
-      right: auto;
-      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;
-        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;
-        }
-      }
-    }
-    
-    &--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}-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;
-        
-        & ~ .#{$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');
-        }
-      }
-    }
-
-    &::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
-    }
-    
-    // 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');
-      }
-      
-      &::before {
-        opacity: 1
-      }
-    }
-    
-    // Error state
-    &.#{$component}--error {    
-      &::before {
-        opacity: 1;
-        background-color: t.color('error');
-      }
-
-      .#{$component}-label {
-        color: t.color('error');
-      }
-    }
-    
-    // Disabled state
-    &.#{$component}--disabled {
-      border-bottom-color: t.alpha('on-surface', 0.38);
-      pointer-events: none;
-      
-      .#{$component}-input {
-        background-color: t.alpha('on-surface', 0.04);
-      }
-    }
-    
-    // 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 {
-        padding: 20px 16px 7px 44px;
-      }
-      
-      .#{$component}-label {
-        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;
-      }
-      
-      .#{$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;
-        }
-      }
-      
-      &.#{$component}--with-trailing-icon {
-        .#{$component}-input {
-          padding-right: 16px;
-          padding-left: 44px;
-        }
-      }
-    }
-  }
-  
-  // ===== 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);
-        }
-      }
-
-      &:autofill {
-        & ~ .#{$component}-label {
-          background-color: t.color('surface');
-          transform: translateY(-145%) scale(0.75);
-        }
-      }
-    }
-
-    .#{$component}-label {
-      background-color: inherit;
-      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 {
-      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
-    &.#{$component}--focused {
-      &::before {
-        opacity: 1;
-      }
-      &:hover {
-        &::before {
-          border-width: 2px;
-        }
-      }
-
-      .#{$component}-label {
-        color: t.color('primary');
-      }
-    }
-    
-    // Error state
-    &.#{$component}--error {    
-      &::before {
-        opacity: 1;
-        border: 2px solid t.color('error');
-      }
-
-      .#{$component}-label {
-        color: t.color('error');
-      }
-    }
-    
-    // Disabled state
-    &.#{$component}--disabled {
-      pointer-events: none;
-      &::before {
-        opacity: 1;
-        border: 1px solid t.alpha('on-surface', 0.38);
-      }
-    }
-    
-    // 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 {
-        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: 12px;
-      }
-    }
-    
-    &.#{$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}--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;
-        }
-      }
-    }
-  }
-  
-   // Multiline styles
-  &--multiline {
-    .#{$component}-input {
-      min-height: 100px;
-      height: auto;
-      resize: vertical;
-      padding-top: 12px;
-    }
-    
-    .#{$component}-prefix,
-    .#{$component}-suffix {
-      top: 28px;
-    }
-    
-    .#{$component}-label {
-      top: 24px;
-    }
-  }
-
-
-  // Support for multiline inputs
-  &-input[type="multiline"] {
-    min-height: 100px;
-    resize: vertical;
-    
-    & ~ .#{$component}-leading-icon,
-    & ~ .#{$component}-trailing-icon,
-    & ~ .#{$component}-prefix,
-    & ~ .#{$component}-suffix {
-      top: 20px;
-      transform: none;
-    }
-  }
-}