mtrl 0.2.9 → 0.3.1

package/src/styles/components/_switch.scss

@@ -10,12 +10,36 @@ $component: '#{base.$prefix}-switch';
 .#{$component} {
   // Base styles
   display: inline-flex;
-  align-items: center;
+  flex-direction: column;
   position: relative;
-  min-height: 32px;
+  width: 100%;
   padding: 4px 0;
   user-select: none;
 
+  // Container for switch and label
+  &-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 48px;
+    width: 100%;
+  }
+
+  // Content wrapper
+  &-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin-right: 12px;
+  }
+
+  // Label
+  &-label {
+    @include m.typography('title-medium');
+    color: t.color('on-surface');
+  }
+
   // Input (visually hidden but accessible)
   &-input {
     position: absolute;
@@ -46,6 +70,24 @@ $component: '#{base.$prefix}-switch';
     background-color: t.color('surface-container-highest');
     border: 2px solid t.color('outline');
     @include m.motion-transition(background-color, border-color, outline);
+    
+    // Ripple effect (consistent size for both hover and press)
+    &::after {
+      content: '';
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      top: -6px;
+      background-color: transparent;
+      opacity: 0;
+      border-radius: 50%;
+      z-index: 0;
+      transform: translateX(-6px);
+      transition: opacity v.motion('duration-medium1') v.motion('easing-emphasized'),
+                  background-color v.motion('duration-medium1') v.motion('easing-emphasized'),
+                  transform v.motion('duration-medium1') cubic-bezier(0.2, 1.4, 0.35, 1);
+      pointer-events: none;
+    }
   }
 
   // Switch thumb (slider)
@@ -58,10 +100,17 @@ $component: '#{base.$prefix}-switch';
     border-radius: 50%;
     background-color: t.color('outline');
     transform: translateX(0);
-    transition: all v.motion('duration-short4') v.motion('easing-emphasized');
+    transition: transform v.motion('duration-medium1') cubic-bezier(0.2, 1.4, 0.35, 1), 
+                background-color v.motion('duration-medium1') v.motion('easing-emphasized'),
+                width v.motion('duration-medium1') v.motion('easing-emphasized'),
+                height v.motion('duration-medium1') v.motion('easing-emphasized'),
+                top v.motion('duration-medium1') v.motion('easing-emphasized'),
+                left v.motion('duration-medium1') v.motion('easing-emphasized');
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 1; /* Ensure thumb is above ripple */
+    pointer-events: none;
 
     // Icon inside thumb
     &-icon {
@@ -80,44 +129,25 @@ $component: '#{base.$prefix}-switch';
     }
   }
 
-  // Label
-  &-label {
-    @include m.typography('body-large');
-    margin-left: 12px;
-    color: t.color('on-surface');
-  }
-
-  // Label position variants
-  &--label-start {
-    .#{$component}-label {
-      margin-left: 0;
-      margin-right: 12px;
-    }
-  }
-
-  &--label-end {
-    flex-direction: row;
-
-    .#{$component}-label {
-      margin-left: 12px;
-      margin-right: 0;
+  // Supporting text
+  &-helper {
+    @include m.typography('body-medium');
+    color: t.color('on-surface-variant');
+    
+    &--error {
+      color: t.color('error');
     }
   }
 
   // RTL support
   @include m.rtl {
-    &--label-start {
-      .#{$component}-label {
-        margin-left: 12px;
-        margin-right: 0;
-      }
+    &-container {
+      flex-direction: row;
     }
-
-    &--label-end {
-      .#{$component}-label {
-        margin-left: 0;
-        margin-right: 12px;
-      }
+    
+    &-content {
+      margin-left: 12px;
+      margin-right: 0;
     }
     
     // Adjust thumb movement for RTL layout
@@ -131,6 +161,10 @@ $component: '#{base.$prefix}-switch';
     .#{$component}-track {
       background-color: t.color('primary');
       border-color: t.color('primary');
+      
+      &::after {
+        transform: translateX(14px);
+      }
     }
 
     .#{$component}-thumb {
@@ -148,9 +182,22 @@ $component: '#{base.$prefix}-switch';
     }
   }
 
+  // Error state
+  &--error {
+    .#{$component}-track {
+      border-color: t.color('error');
+    }
+  }
+
   // Disabled state
   &--disabled {
-    opacity: 0.38;
+    .#{$component}-track {
+      opacity: 0.38;
+    }
+    
+    .#{$component}-label {
+      opacity: 0.38;
+    }
     
     // Specific styles for disabled + checked
     &.#{$component}--checked {
@@ -161,53 +208,70 @@ $component: '#{base.$prefix}-switch';
       }
       
       .#{$component}-thumb {
-        background-color: t.color('on-primary');
-        opacity: 1;
+        background-color: t.color('surface-dim');
+        opacity: 0.38;
         &-icon {
-          color: t.color('outline')
+          color: t.color('on-surface');
         }
       }
     }
   }
 
-  // Hover effects (state layer)
-  &:not(&--disabled) {
-    .#{$component}-input:hover + .#{$component}-track {
-      &::before {
-        content: '';
-        position: absolute;
-        top: -8px;
-        left: -8px;
-        right: -8px;
-        bottom: -8px;
-        background-color: t.color('on-surface');
-        opacity: v.state('hover-state-layer-opacity');
-        border-radius: 20px;
-      }
+  // Interactive states for enabled switches
+  &:not(.#{$component}--disabled) {
+    // Remove track hover effects
+    .#{$component}-input:hover + .#{$component}-track::before,
+    .#{$component}-input:active + .#{$component}-track::before {
+      display: none;
     }
-    
-    // Active/pressed state
-    .#{$component}-input:active + .#{$component}-track {
-      &::before {
-        content: '';
-        position: absolute;
-        top: -8px;
-        left: -8px;
-        right: -8px;
-        bottom: -8px;
-        background-color: t.color('on-surface');
+
+    // Handle hover and active states for both unchecked
+    &:not(.#{$component}--checked) {
+      .#{$component}-input:hover ~ .#{$component}-track,
+      .#{$component}-input:active ~ .#{$component}-track {
+        .#{$component}-thumb {
+          background-color: t.color('on-surface-variant');
+        }
+        
+        &::after {
+          background-color: t.color('on-surface');
+          opacity: v.state('hover-state-layer-opacity');
+          transform: translateX(-6px);
+        }
+      }
+      
+      .#{$component}-input:active ~ .#{$component}-track::after {
         opacity: v.state('pressed-state-layer-opacity');
-        border-radius: 20px;
       }
     }
     
-    // Hover/active states when checked
+    // Hover/active states for checked
     &.#{$component}--checked {
-      .#{$component}-input:hover + .#{$component}-track::before,
-      .#{$component}-input:active + .#{$component}-track::before {
-        background-color: t.color('primary');
+      .#{$component}-input:hover ~ .#{$component}-track,
+      .#{$component}-input:active ~ .#{$component}-track {
+        &::after {
+          background-color: t.color('primary');
+          opacity: v.state('hover-state-layer-opacity');
+          transform: translateX(14px);
+        }
+      }
+      
+      .#{$component}-input:active ~ .#{$component}-track::after {
+        opacity: v.state('pressed-state-layer-opacity');
       }
     }
+
+    // Expand thumb on press for both checked and unchecked
+    .#{$component}-input:active ~ .#{$component}-track .#{$component}-thumb {
+      width: 28px;
+      height: 28px;
+      top: 0;
+      left: 0;
+    }
+    
+    &.#{$component}--checked .#{$component}-input:active ~ .#{$component}-track .#{$component}-thumb {
+      left: 0;
+    }
   }
 
   // Accessibility

package/src/styles/components/_textfield.scss

@@ -286,12 +286,12 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
-    // Hover state
-    &:hover {    
-      .#{$component}-label {
-        color: t.color('primary');
-      }
-    }
+    // // Hover state
+    // &:hover {    
+    //   .#{$component}-label {
+    //     color: t.color('primary');
+    //   }
+    // }
     
     // Error state
     &.#{$component}--error {    
@@ -382,6 +382,7 @@ $component: '#{base.$prefix}-textfield';
   
   // ===== OUTLINED VARIANT =====
   &--outlined {
+    background-color: inherit;
     border-radius: f.get-shape('extra-small');
     @include m.motion-transition(border-color);
     
@@ -410,6 +411,7 @@ $component: '#{base.$prefix}-textfield';
     }
 
     .#{$component}-label {
+      background-color: inherit;
       padding: 0 4px;
       left: 12px;
       top: 49%;
@@ -431,7 +433,6 @@ $component: '#{base.$prefix}-textfield';
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
       padding: 0 4px;
-      background-color: t.color('surface');
       transform: translateY(-147%) scale(0.75);
     }
 
@@ -445,18 +446,10 @@ $component: '#{base.$prefix}-textfield';
           border-width: 2px;
         }
       }
-    }
-    
-    // Hover state
-    &:hover {    
+
       .#{$component}-label {
         color: t.color('primary');
       }
-
-      &::before {
-        opacity: 1;
-        border: 1px solid t.color('primary');
-      }
     }
     
     // Error state