mtrl 0.2.6 → 0.2.8

package/src/{components/tabs/_styles.scss → styles/components/_tabs.scss}

@@ -25,11 +25,18 @@ $container: '#{base.$prefix}-tabs';
     &:has(.#{$component}--icon-and-text) {
       min-height: 64px;
     }
+    
+    // Primary indicator specific styling
+    .#{$container}-indicator {
+      height: 4px;
+      border-radius: 3px 3px 0 0;
+      background-color: t.color('primary');
+    }
   }
   
   &--secondary {
     min-height: 48px;
-    // Tab indicator styling
+    // Tab indicator styling for secondary variant
     .#{$container}-indicator {
       height: 2px;
       border-radius: 0;
@@ -63,13 +70,10 @@ $container: '#{base.$prefix}-tabs';
     background-color: t.color('outline-variant'); // MD3: Outline variant color
   }
   
-  // Tab indicator styling
+  // Tab indicator styling - base styles
   &-indicator {
     position: absolute;
     bottom: 1px;
-    height: 4px;
-    background-color: t.color('primary');
-    border-radius: 3px 3px 0 0;
     transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                 width 250ms cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1; // Ensure indicator appears above divider
@@ -86,7 +90,7 @@ $container: '#{base.$prefix}-tabs';
   max-width: 360px;
   padding: 0 16px;
   border: none;
-  border-radius: 5px;
+  border-radius: 5px 5px 0 0;
   background-color: transparent;
   color: t.color('on-surface-variant');
   cursor: pointer;
@@ -122,12 +126,12 @@ $container: '#{base.$prefix}-tabs';
   
   &:focus-visible {
     outline: 2px solid t.color('primary');
-    outline-offset: 0;
+    outline-offset: -2px;
     z-index: 1;
   }
   
   // Disabled state
-  &:disabled, &[disabled], &--disabled {
+  &--disabled, &:disabled {
     pointer-events: none;
     opacity: 0.38;
   }
@@ -189,44 +193,102 @@ $container: '#{base.$prefix}-tabs';
     }
   }
   
-  // Active Tab - Apply to both primary and secondary
-  &--active {
-    color: t.color('primary'); // MD3: Primary color
-    
-    .#{$component}-icon {
-      color: t.color('primary'); // MD3: Primary color
-    }
-    
-    // Hover state for active tabs
-    &:hover:not(:disabled):not([disabled]) {
-      background-color: t.alpha('primary', 0.08);
+  // ACTIVE TAB STATES - PRIMARY VARIANT
+  .#{$container}--primary & {
+    // Active Tab Base State - Apply to primary variant
+    &--active {
+      color: t.color('primary');
+      
+      .#{$component}-icon {
+        color: t.color('primary');
+      }
+      
+      // Hover state for active tabs
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('primary', 0.08);
+      }
+      
+      // Focused state for active tabs
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('primary', 0.1);
+        outline-color: t.color('primary');
+      }
+      
+      // Pressed state for active tabs
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('primary', 0.12);
+      }
     }
     
-    // Pressed state for active tabs
-    &:active:not(:disabled):not([disabled]) {
-      background-color: t.alpha('primary', 0.12);
+    // Inactive Tabs - Primary variant
+    &:not(.#{$component}--active):not(.#{$component}--disabled):not(:disabled) {
+      color: t.color('on-surface-variant');
+      
+      // Hover state for inactive tabs
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('on-surface-variant', 0.08);
+      }
+      
+      // Focused state for inactive tabs
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('on-surface-variant', 0.1);
+        outline-color: t.color('on-surface-variant');
+      }
+      
+      // Pressed state for inactive tabs
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('on-surface-variant', 0.12);
+      }
     }
   }
   
-  // Secondary variant overrides
+  // ACTIVE TAB STATES - SECONDARY VARIANT
   .#{$container}--secondary & {
+    // Active Tab - Secondary variant
     &--active {
       color: t.color('on-surface');
       
       .#{$component}-icon {
         color: t.color('on-surface');
       }
+      
+      // Hover state for active tabs - secondary
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('on-surface', 0.08);
+      }
+      
+      // Focused state for active tabs - secondary
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('on-surface', 0.1);
+        outline-color: t.color('on-surface');
+      }
+      
+      // Pressed state for active tabs - secondary
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+    }
+    
+    // Inactive Tabs - Secondary variant
+    &:not(.#{$component}--active):not(.#{$component}--disabled):not(:disabled) {
+      color: t.color('on-surface-variant');
+      
+      // Hover state for inactive tabs - secondary
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('on-surface-variant', 0.08);
+      }
+      
+      // Focused state for inactive tabs - secondary
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('on-surface-variant', 0.1);
+        outline-color: t.color('on-surface-variant');
+      }
+      
+      // Pressed state for inactive tabs - secondary
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('on-surface-variant', 0.12);
+      }
     }
-  }
-  
-  // Hover state for inactive tabs
-  &:hover:not(:disabled):not(&--active):not([disabled]) {
-    background-color: t.alpha('on-surface-variant', 0.08);
-  }
-  
-  // Pressed state for inactive tabs
-  &:active:not(:disabled):not([disabled]):not(&--active) {
-    background-color: t.alpha('on-surface-variant', 0.12);
   }
   
   // Ripple effect styling

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

@@ -131,14 +131,14 @@ $component: '#{base.$prefix}-textfield';
   
   // ===== 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;
       }
@@ -161,6 +161,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.3s opacity ease;
+    }
+
     // Populated field (not empty) or focused field label position
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
@@ -168,48 +181,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
@@ -233,13 +231,13 @@ $component: '#{base.$prefix}-textfield';
   
   // ===== 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 +247,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 +254,80 @@ $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: 2px solid t.color('primary');
+      border-radius: f.get-shape('extra-small');
+      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 {
-      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;
+      &::before {
+        opacity: 1;
       }
-      
-      .#{$component}-input {
-        height: 54px;
-        padding: 12px 15px 13px;
-      }
-      
       &: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;
-      }
-      
-      .#{$component}-input {
-        padding: 12px 15px 13px;
-      }
-      
-      &:hover,
-      &.#{$component}--focused {
-        border: 2px solid t.color('error');
       }
     }
     
     // Disabled state
     &.#{$component}--disabled {
-      border-color: t.alpha('on-surface', 0.38);
       pointer-events: none;
+      &::before {
+        opacity: 1;
+        border: 1px solid t.alpha('on-surface', 0.38);
+      }
     }
     
     // RTL support