mtrl 0.0.3 → 0.1.2

package/src/components/switch/styles.scss

@@ -1,8 +1,14 @@
-// src/components/switch/styles.scss
-@use 'sass:map';
-@use '../../styles/abstract/config' as c;
+// src/components/switch/_switch.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;
 
-.#{c.$prefix}-switch {
+$component: '#{base.$prefix}-switch';
+
+.#{$component} {
+  // Base styles
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -10,6 +16,7 @@
   padding: 4px 0;
   user-select: none;
 
+  // Input (visually hidden but accessible)
   &-input {
     position: absolute;
     opacity: 0;
@@ -23,25 +30,25 @@
       cursor: not-allowed;
     }
 
-    // New focus style that's more visible
-    &:focus-visible ~ .#{c.$prefix}-switch-track {
-      outline: 2px solid var(--mtrl-sys-color-primary);
+    // Focus indicator
+    &:focus-visible ~ .#{$component}-track {
+      outline: 2px solid t.color('primary');
       outline-offset: 2px;
     }
   }
 
+  // Switch track (background bar)
   &-track {
     position: relative;
     min-width: 52px;
     height: 32px;
     border-radius: 16px;
-    background-color: var(--mtrl-sys-color-surface-container-highest);
-    border: 2px solid var(--mtrl-sys-color-outline);
-    transition: background-color map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard'),
-                border-color map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard'),
-                outline map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard');
+    background-color: t.color('surface-container-highest');
+    border: 2px solid t.color('outline');
+    @include m.motion-transition(background-color, border-color, outline);
   }
 
+  // Switch thumb (slider)
   &-thumb {
     position: absolute;
     top: 6px;
@@ -49,21 +56,22 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background-color: var(--mtrl-sys-color-outline);
+    background-color: t.color('outline');
     transform: translateX(0);
-    transition: all map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-emphasized');
+    transition: all v.motion('duration-short4') v.motion('easing-emphasized');
     display: flex;
     align-items: center;
     justify-content: center;
 
+    // Icon inside thumb
     &-icon {
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transform: scale(0);
-      transition: all map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-emphasized');
-      color: var(--mtrl-sys-color-primary);
+      transition: all v.motion('duration-short4') v.motion('easing-emphasized');
+      color: t.color('primary');
       
       svg {
         width: 14px;
@@ -72,17 +80,18 @@
     }
   }
 
+  // Label
   &-label {
-    @include c.typography('body-large');
+    @include m.typography('body-large');
     margin-left: 12px;
-    color: var(--mtrl-sys-color-on-surface);
+    color: t.color('on-surface');
   }
 
   // Label position variants
   &--label-start {
     flex-direction: row-reverse;
 
-    .#{c.$prefix}-switch-label {
+    .#{$component}-label {
       margin-left: 0;
       margin-right: 12px;
     }
@@ -91,37 +100,43 @@
   &--label-end {
     flex-direction: row;
 
-    .#{c.$prefix}-switch-label {
+    .#{$component}-label {
       margin-left: 12px;
       margin-right: 0;
     }
   }
 
-  @include c.rtl {
+  // RTL support
+  @include m.rtl {
     &--label-start {
-      .#{c.$prefix}-switch-label {
+      .#{$component}-label {
         margin-left: 12px;
         margin-right: 0;
       }
     }
 
     &--label-end {
-      .#{c.$prefix}-switch-label {
+      .#{$component}-label {
         margin-left: 0;
         margin-right: 12px;
       }
     }
+    
+    // Adjust thumb movement for RTL layout
+    &--checked .#{$component}-thumb {
+      transform: translateX(-20px);
+    }
   }
 
-  // States
+  // Checked state
   &--checked {
-    .#{c.$prefix}-switch-track {
-      background-color: var(--mtrl-sys-color-primary);
-      border-color: var(--mtrl-sys-color-primary);
+    .#{$component}-track {
+      background-color: t.color('primary');
+      border-color: t.color('primary');
     }
 
-    .#{c.$prefix}-switch-thumb {
-      background-color: var(--mtrl-sys-color-on-primary);
+    .#{$component}-thumb {
+      background-color: t.color('on-primary');
       transform: translateX(20px);
       width: 24px;
       height: 24px;
@@ -135,30 +150,31 @@
     }
   }
 
+  // Disabled state
   &--disabled {
     opacity: 0.38;
     
     // Specific styles for disabled + checked
-    &.#{c.$prefix}-switch--checked {
-      .#{c.$prefix}-switch-track {
-        background-color: var(--mtrl-sys-color-outline);
-        border-color: var(--mtrl-sys-color-outline);
+    &.#{$component}--checked {
+      .#{$component}-track {
+        background-color: t.color('outline');
+        border-color: t.color('outline');
         opacity: 0.38;
       }
       
-      .#{c.$prefix}-switch-thumb {
-        background-color: var(--mtrl-sys-color-on-primary);
+      .#{$component}-thumb {
+        background-color: t.color('on-primary');
         opacity: 1;
         &-icon {
-          color: var(--mtrl-sys-color-outline)
+          color: t.color('outline')
         }
       }
     }
   }
 
-  // Hover effects
+  // Hover effects (state layer)
   &:not(&--disabled) {
-    .#{c.$prefix}-switch-input:hover + .#{c.$prefix}-switch-track {
+    .#{$component}-input:hover + .#{$component}-track {
       &::before {
         content: '';
         position: absolute;
@@ -166,24 +182,55 @@
         left: -8px;
         right: -8px;
         bottom: -8px;
-        background-color: var(--mtrl-sys-color-on-surface);
-        opacity: 0.08;
+        background-color: t.color('on-surface');
+        opacity: v.state('hover-state-layer-opacity');
         border-radius: 20px;
       }
     }
+    
+    // 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');
+        opacity: v.state('pressed-state-layer-opacity');
+        border-radius: 20px;
+      }
+    }
+    
+    // Hover/active states when checked
+    &.#{$component}--checked {
+      .#{$component}-input:hover + .#{$component}-track::before,
+      .#{$component}-input:active + .#{$component}-track::before {
+        background-color: t.color('primary');
+      }
+    }
   }
 
-  @include c.reduced-motion {
-    .#{c.$prefix}-switch-track,
-    .#{c.$prefix}-switch-thumb,
-    .#{c.$prefix}-switch-thumb-icon {
+  // Accessibility
+  @include m.reduced-motion {
+    .#{$component}-track,
+    .#{$component}-thumb,
+    .#{$component}-thumb-icon {
       transition: none;
     }
   }
 
-  @include c.high-contrast {
-    .#{c.$prefix}-switch-track {
+  @include m.high-contrast {
+    .#{$component}-track {
       border-width: 2px;
     }
+    
+    &--checked .#{$component}-track {
+      border-color: currentColor;
+    }
   }
+  
+  // Touch target for better mobile experience
+  // @include m.touch-target;
 }

package/src/components/textfield/styles.scss

@@ -1,6 +1,352 @@
 // src/components/textfield/styles.scss
-@use 'sass:map';
-@use '../../styles/abstract/config' as c;
-@use 'styles/base';
-@use 'styles/filled';
-@use 'styles/outlined';
+@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;
+  
+  // Size variants
+  &--small {
+    .#{$component}-input {
+      height: 48px;
+    }
+  }
+
+  &--large {
+    .#{$component}-input {
+      height: 64px;
+    }
+  }
+  
+  // 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');
+  }
+  
+  // Input element
+  &-input {
+    @include m.typography('body-large');
+    @include m.shape('extra-small');
+    padding: 13px 16px;
+    width: 100%;
+    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');
+      }
+    }
+  }
+
+  // Error state
+  &--error {
+    border-color: t.color('error');
+    
+    .#{$component}-label {
+      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 {
+      color: t.color('on-surface');
+      opacity: 0.38;
+    }
+  }
+  
+  // Helper text
+  &-helper {
+    @include m.typography('body-small');
+    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;
+    }
+  }
+  
+  // RTL support
+  @include m.rtl {
+    &-label {
+      left: auto;
+      right: 16px;
+      transform-origin: right top;
+    }
+    
+    &-required {
+      margin-left: 0;
+      margin-right: 4px;
+    }
+  }
+  
+  // ===== FILLED VARIANT =====
+  &--filled {
+    border-bottom: 1px solid t.color('outline');
+    
+    .#{$component}-input {
+      background-color: t.color('surface-container-highest');
+      padding: 20px 16px 7px;
+      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;
+      }
+
+      // 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');
+        }
+      }
+    }
+
+    // Populated field (not empty) or focused field label position
+    &:not(.#{$component}--empty) .#{$component}-label,
+    &.#{$component}--focused .#{$component}-label {
+      transform: translateY(-95%) scale(0.75);
+    }
+
+    // Focus state
+    &.#{$component}--focused {
+      border-bottom: 2px solid t.color('primary');
+      
+      .#{$component}-label {
+        color: t.color('primary');
+      }
+      
+      &:hover {
+        border-bottom: 2px solid t.color('primary');
+      }
+    }
+    
+    // Hover state
+    &:hover {
+      border-bottom: 1px solid t.color('primary');
+      
+      .#{$component}-label {
+        color: t.color('primary');
+      }
+    }
+    
+    // Error state
+    &.#{$component}--error {
+      border-bottom: 2px solid 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
+    &.#{$component}--disabled {
+      border-bottom-color: t.alpha('on-surface', 0.38);
+      pointer-events: none;
+      
+      .#{$component}-input {
+        background-color: t.alpha('on-surface', 0.04);
+      }
+    }
+    
+    // RTL support
+    @include m.rtl {
+      .#{$component}-label {
+        left: auto;
+        right: 16px;
+      }
+    }
+  }
+  
+  // ===== 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;
+      @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);
+          left: 13px;
+          padding: 0 4px;
+        }
+      }
+
+      &:autofill {
+        & ~ .#{$component}-label {
+          background-color: t.color('surface');
+          transform: translateY(-145%) scale(0.75);
+          left: 13px;
+          padding: 0 4px;
+        }
+      }
+    }
+
+    // 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;
+    }
+
+    // Focus state
+    &.#{$component}--focused {
+      border: 2px solid t.color('primary');
+      
+      .#{$component}-label {
+        color: t.color('primary');
+        border-radius: 2px;
+        left: 12px;
+      }
+      
+      .#{$component}-input {
+        padding: 12px 15px 13px;
+      }
+      
+      &:hover {
+        border: 2px solid t.color('primary');
+      }
+    }
+    
+    // Hover state
+    &:hover {
+      border: 1px solid t.color('primary');
+      
+      .#{$component}-label {
+        color: t.color('primary');
+      }
+    }
+    
+    // Error state
+    &.#{$component}--error {
+      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;
+    }
+    
+    // RTL support
+    @include m.rtl {
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        left: auto;
+        right: 13px;
+      }
+      
+      &.#{$component}--focused .#{$component}-label {
+        right: 12px;
+      }
+      
+      &.#{$component}--error .#{$component}-label {
+        right: 12px;
+      }
+    }
+  }
+}

package/src/core/build/_ripple.scss

@@ -0,0 +1,79 @@
+// src/components/ripple/_ripple.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;
+
+$component: '#{base.$prefix}-ripple';
+
+.#{$component} {
+  // Ripple container
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  
+  // Ripple element
+  &-wave {
+    position: absolute;
+    border-radius: 50%;
+    background-color: currentColor;
+    transform: scale(0);
+    opacity: 0;
+    pointer-events: none;
+    will-change: transform, opacity;
+    
+    // Animation
+    transition-property: transform, opacity;
+    transition-duration: v.motion('duration-short4');
+    transition-timing-function: v.motion('easing-standard');
+    
+    // Active ripple
+    &.active {
+      transform: scale(1);
+      opacity: v.state('hover-state-layer-opacity');
+    }
+    
+    &.fade-out {
+      opacity: 0;
+    }
+  }
+}
+
+// Standalone utility for adding ripple to any element
+[data-ripple] {
+  position: relative;
+  overflow: hidden;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+  
+  // Handle ripple color based on data attribute
+  &[data-ripple="light"]::after {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  
+  &[data-ripple="dark"]::after {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  
+  // Make content appear above ripple
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}

package/src/core/dom/create.js

@@ -86,7 +86,6 @@ export const createElement = (options = {}) => {
   }
 
   if (typeof onCreate === 'function') {
-    log.info('onCreate', element, context)
     onCreate(element, context)
   }