mtrl 0.2.8 → 0.3.0

package/src/styles/components/_navigation-mobile.scss

@@ -0,0 +1,244 @@
+// src/components/navigation/_mobile.scss
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/theme' as t;
+
+$prefix: base.$prefix;
+
+// Mobile navigation overlay
+.#{$prefix}-nav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: t.alpha('shadow', 0.5);
+  z-index: v.z-index('modal') - 1; // Just below modal level but above most content
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s v.motion('easing-standard'), visibility 0.3s v.motion('easing-standard');
+  
+  // Add backdrop blur for a modern effect where supported
+  @supports (backdrop-filter: blur(4px)) {
+    backdrop-filter: blur(4px);
+    background-color: t.alpha('shadow', 0.4);
+  }
+  
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// Close button for mobile drawer
+.#{$prefix}-nav-close-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: none; // Hidden by default, shown on mobile
+  align-items: center;
+  justify-content: center;
+  color: t.color('on-surface');
+  z-index: 1;
+  -webkit-tap-highlight-color: transparent; // Removes default mobile tap highlight
+  
+  &:hover {
+    background-color: t.alpha('on-surface', 0.05);
+  }
+  
+  // Touch feedback state
+  &.active {
+    background-color: t.alpha('on-surface', 0.12);
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('primary');
+    outline-offset: 2px;
+  }
+  
+  svg {
+    width: 24px;
+    height: 24px;
+    stroke: currentColor;
+  }
+  
+  // Ensure WCAG-compliant touch target size
+  @media (pointer: coarse) {
+    min-width: 48px;
+    min-height: 48px;
+  }
+}
+
+// Body class to prevent scrolling when drawer is open
+.#{$prefix}-body-drawer-open {
+  overflow: hidden;
+  
+  // On iOS we need to handle the body position differently
+  @supports (-webkit-overflow-scrolling: touch) {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Responsive behavior for navigation system - apply to small screens or touch devices
+@media (max-width: 960px), (pointer: coarse) {
+  // Rail navigation
+  .#{$prefix}-nav--rail {
+    width: 56px;
+    z-index: v.z-index('modal') - 1;
+    border-right: 1px solid t.color('outline-variant');
+    
+    // Hide labels on mobile
+    .#{$prefix}-nav-label {
+      display: none;
+    }
+    
+    // Center align items
+    .#{$prefix}-nav-item {
+      justify-content: center;
+      height: 56px;
+      -webkit-tap-highlight-color: transparent; // Remove default mobile highlight
+      
+      // Increase touch targets for better accessibility
+      @media (pointer: coarse) {
+        min-height: 48px;
+        padding: 12px 8px;
+      }
+      
+      // Touch-friendly active state
+      &:active {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+    }
+    
+    // Larger icons on mobile
+    .#{$prefix}-nav-icon {
+      font-size: 1.25rem;
+      
+      // Ensure icon touch target meets WCAG requirements
+      @media (pointer: coarse) {
+        min-width: 44px;
+        min-height: 44px;
+      }
+    }
+  }
+  
+  // Drawer navigation
+  .#{$prefix}-nav--drawer {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 280px;
+    max-width: 85vw;
+    z-index: v.z-index('modal');
+    background-color: t.color('surface');
+    box-shadow: v.elevation('level-3');
+    transform: translateX(-100%);
+    transition: transform 0.3s v.motion('easing-standard');
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
+    
+    &:not(.#{$prefix}-nav--hidden) {
+      transform: translateX(0);
+    }
+    
+    // Optimize drawer items for touch
+    .#{$prefix}-nav-item {
+      -webkit-tap-highlight-color: transparent;
+      
+      @media (pointer: coarse) {
+        min-height: 48px;
+        padding: 12px 16px;
+      }
+      
+      // Touch feedback
+      &:active {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+    }
+    
+    // Support RTL languages
+    @include m.rtl {
+      left: auto;
+      right: 0;
+      transform: translateX(100%);
+      
+      &:not(.#{$prefix}-nav--hidden) {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+// Desktop behavior
+@media (min-width: 961px) {
+  .#{$prefix}-nav--drawer {
+    // For desktop, transition by width instead of transform
+    transition: width 0.3s v.motion('easing-standard'), opacity 0.3s v.motion('easing-standard');
+  }
+  
+  .#{$prefix}-nav-close-btn {
+    display: none !important; // Always hidden on desktop
+  }
+  
+  // Hide overlay on desktop
+  .#{$prefix}-nav-overlay.active {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+// Safe area insets for notched devices like iPhone X and newer
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .#{$prefix}-nav--drawer {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  
+  .#{$prefix}-nav--rail {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  
+  .#{$prefix}-nav--bar {
+    // For bottom navigation bars
+    &.#{$prefix}-nav--bottom {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+}
+
+// Gesture hints for touch interfaces
+@media (pointer: coarse) {
+  // Add visual affordance for swipe gesture
+  .#{$prefix}-nav--drawer:not(.#{$prefix}-nav--hidden) {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 4px;
+      height: 40px;
+      border-radius: 4px 0 0 4px;
+      background-color: t.alpha('on-surface', 0.1);
+      transform: translateY(-50%);
+      opacity: 0.5;
+      // Hide after interaction to avoid cognitive load
+      animation: fadeOutAfterDelay 4s forwards;
+    }
+  }
+  
+  @keyframes fadeOutAfterDelay {
+    0%, 50% { opacity: 0.5; }
+    100% { opacity: 0; }
+  }
+}

package/src/styles/components/_navigation-system.scss

@@ -0,0 +1,151 @@
+// src/components/navigation/system.scss
+
+// Navigation system specific styles
+// These complement the existing navigation component styles
+
+$nav-animation-duration: 0.2s;
+$nav-animation-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+// Drawer animation states
+.mtrl-nav--drawer {
+  transition: transform $nav-animation-duration $nav-animation-function,
+              opacity $nav-animation-duration $nav-animation-function;
+  
+  // Hidden state (transform off-screen)
+  &.mtrl-nav--hidden {
+    transform: translateX(-100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  // Right positioned drawer
+  &.mtrl-nav--right {
+    &.mtrl-nav--hidden {
+      transform: translateX(100%);
+    }
+  }
+  
+  // Animation classes
+  &.mtrl-nav--animate-in {
+    animation: nav-drawer-in $nav-animation-duration $nav-animation-function;
+  }
+  
+  &.mtrl-nav--animate-out {
+    animation: nav-drawer-out $nav-animation-duration $nav-animation-function;
+  }
+}
+
+// Navigation system container (optional - for wrapping rail + drawer)
+.mtrl-nav-system {
+  display: flex;
+  position: relative;
+  
+  // Rail is fixed width
+  .mtrl-nav--rail {
+    flex: 0 0 auto;
+  }
+  
+  // Drawer expands
+  .mtrl-nav--drawer {
+    flex: 1 0 auto;
+  }
+}
+
+// Drawer entry animation
+@keyframes nav-drawer-in {
+  0% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+// Drawer exit animation
+@keyframes nav-drawer-out {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+}
+
+// Right-side drawer animations
+.mtrl-nav--drawer.mtrl-nav--right {
+  &.mtrl-nav--animate-in {
+    animation: nav-drawer-right-in $nav-animation-duration $nav-animation-function;
+  }
+  
+  &.mtrl-nav--animate-out {
+    animation: nav-drawer-right-out $nav-animation-duration $nav-animation-function;
+  }
+}
+
+@keyframes nav-drawer-right-in {
+  0% {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes nav-drawer-right-out {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+}
+
+// Mobile optimizations
+@media (max-width: 960px) {
+  .mtrl-nav-system {
+    flex-direction: column;
+    
+    .mtrl-nav--rail {
+      // Mobile rail can be top or bottom
+      &.mtrl-nav--top, &.mtrl-nav--bottom {
+        width: 100%;
+      }
+    }
+    
+    .mtrl-nav--drawer {
+      // Mobile drawer takes full width
+      width: 100%;
+      max-width: 100%;
+      
+      &.mtrl-nav--hidden {
+        transform: translateY(-100%);
+      }
+      
+      &.mtrl-nav--bottom {
+        &.mtrl-nav--hidden {
+          transform: translateY(100%);
+        }
+      }
+    }
+  }
+}
+
+// Focus and accessibility enhancements
+.mtrl-nav-system {
+  [role="navigation"] {
+    &:focus-within {
+      outline: 2px solid var(--mtrl-primary-color, #6200ee);
+      outline-offset: -2px;
+    }
+  }
+}
+
+@use 'navigation-mobile'

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