mtrl 0.5.2 → 0.5.4

package/src/styles/components/_menu.scss

@@ -0,0 +1,245 @@
+// src/styles/components/_menu.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/theme' as t;
+
+$prefix: base.$prefix;
+
+$component: '#{$prefix}-menu';
+
+.#{$component} {
+  // Base styles
+  @include m.typography('body-medium');
+  @include m.shape('extra-small');
+  
+  position: fixed;
+  z-index: f.get-z-index('menu');
+  min-width: 112px;
+  max-width: 280px;
+  padding: 8px 0; // Keep padding consistent
+  background-color: t.color('surface-container');
+  color: t.color('on-surface');
+  @include m.elevation(2);
+  overflow: hidden;
+  
+  // Initial state - hidden with proper transform origin
+  display: block;
+  opacity: 0;
+  transform-origin: top center; // Default transform origin
+  transform: scaleY(0);
+  pointer-events: none;
+  
+  // Material Design 3 standard animation curve for menus
+  transition: 
+    transform v.motion('duration-medium1') v.motion('easing-emphasized'),
+    opacity v.motion('duration-medium1') v.motion('easing-emphasized');
+  
+  // Visible state
+  &--visible {
+    opacity: 1;
+    transform: scaleY(1);
+    pointer-events: auto;
+  }
+  
+  // Position variations with appropriate transform origins
+  &--position-top,
+  &--position-top-start,
+  &--position-top-end {
+    transform-origin: bottom center;
+  }
+  
+  // Submenu styling
+  &--submenu {
+    position: absolute;
+    z-index: f.get-z-index('menu') + 1;
+  }
+
+  // List container
+  &-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+    max-height: calc(100vh - 96px);
+    @include m.scrollbar;
+    width: 100%;
+  }
+
+  // Menu items
+  &-item {
+    @include m.typography('body-large');
+    @include m.flex-row;
+    
+    position: relative;
+    min-height: 48px;
+    padding: 12px 16px;
+    padding-right: 42px;
+    cursor: pointer;
+    user-select: none;
+    color: t.color('on-surface');
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+    box-sizing: border-box;
+    
+    // State layer effects
+    &:hover {
+      @include m.state-layer(t.color('on-surface'), 'hover');
+    }
+    
+    &:focus {
+      @include m.state-layer(t.color('on-surface'), 'focus');
+      outline: none;
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+
+    // Submenu indicator
+    &--submenu {
+      padding-right: 48px;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center / contain no-repeat;
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3C/svg%3E") center / contain no-repeat;
+        background-color: currentColor;
+        opacity: 0.87;
+      }
+      
+      &[aria-expanded="true"] {
+        @include m.state-layer(t.color('on-surface'), 'hover');
+        
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
+    // Disabled state
+    &--disabled {
+      pointer-events: none;
+      color: t.alpha('on-surface', 0.38);
+    }
+    
+    // Selected state for select component
+    &--selected {
+      color: t.color('primary');
+      
+      &::after {
+        content: "";
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 18px;
+        height: 18px;
+        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
+        background-color: currentColor;
+      }
+    }
+    
+    // Content containers inside menu items
+    &-content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      overflow: hidden;
+    }
+    
+    &-icon {
+      margin-right: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    
+    &-text {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    &-shortcut {
+      margin-left: 12px;
+      color: t.color('on-surface-variant');
+      flex-shrink: 0;
+    }
+  }
+
+  // Divider
+  &-divider {
+    height: 1px;
+    margin: 8px 0;
+    background-color: t.color('outline-variant');
+  }
+
+  // Accessibility
+  @include m.focus-ring('.#{$component}-item:focus-visible');
+  
+  // Reduced motion preference support
+  @include m.reduced-motion {
+    transition: opacity 0.1s linear;
+    transform: none !important;
+    
+    &--visible {
+      transform: none !important;
+    }
+  }
+  
+  // High contrast mode
+  @include m.high-contrast {
+    border: 1px solid CurrentColor;
+    
+    .#{$component}-divider {
+      background-color: CurrentColor;
+    }
+    
+    .#{$component}-item--disabled {
+      opacity: 1;
+      color: GrayText;
+    }
+  }
+
+  // RTL Support
+  @include m.rtl {
+    transform-origin: top right;
+    
+    &--position-top,
+    &--position-top-start,
+    &--position-top-end {
+      transform-origin: bottom right;
+    }
+    
+    .#{$component}-item {
+      &--submenu {
+        padding-right: 16px;
+        padding-left: 48px;
+        
+        &::after {
+          right: auto;
+          left: 16px;
+          transform: translateY(-50%) rotate(180deg);
+        }
+      }
+    }
+  }
+}

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'