mtrl 0.5.2 → 0.5.4

package/src/styles/components/_slider.scss

@@ -0,0 +1,264 @@
+// src/components/slider/_styles.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;
+
+// Define the transition properties for smoother animations with absolute positioning
+$handle-transition: left 0.225s cubic-bezier(0.4, 0, 0.2, 1), transform 0.225s cubic-bezier(0.4, 0, 0.2, 1);
+$bubble-transition: left 0.225s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.225s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.225s;
+$bubble-transition-visible: left 0.225s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.225s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
+
+$component: '#{base.$prefix}-slider';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  touch-action: none;
+  
+  // Container should not have a focus outline
+  &:focus {
+    outline: none;
+  }
+  
+  // Label styles
+  &-label {
+    display: block;
+    font-size: 18px;
+    font-weight: 400;
+    color: t.color('on-surface');
+    margin-bottom: 4px;
+  }
+  
+  // Icon positioning
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: t.color('on-surface-variant');
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    top: 16px;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // When slider has icon at end position
+  &--icon {
+    .#{$component}-label {
+      margin-left: 48px;
+    }
+
+    .#{$component}-container {
+      margin-left: 48px;
+    }
+  }
+
+  // Slider container - holds all the slider elements
+  &-container {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  // Canvas element for hybrid rendering
+  &-canvas {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100% !important;
+    pointer-events: none;
+    z-index: 0;
+  }
+ 
+  // Handle - updated with T-shape and proper focus styles
+  &-handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    z-index: 4;
+    padding: 4px 0;
+    transition: $handle-transition;
+    width: 14px;
+    height: 50px;
+    border-radius: 16px;
+    background-color: rgba(red, .0);
+
+    // Focus styles for keyboard navigation
+    &:focus {
+      outline: 2px solid t.color('outline');
+    }
+    
+    // Class added when focused via keyboard
+    &--focused {
+      // Additional styling when focused
+    }
+
+    // Create a T-shaped handle using pseudo-elements
+    &::before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: calc(100% - 8px);
+      background-color: t.color('primary');
+      border-radius: 2px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transition: background-color 0.15s ease, opacity 0.15s ease, width 0.15s ease;
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Disabled pointer events on the pseudo-element
+    &::before {
+      pointer-events: none;
+    }
+    
+    // Make handle line slimmer during dragging (feedback)
+    .#{$component}--dragging & {
+      &::before {
+        width: 3px;
+      }
+    }
+    
+    // Hover state
+    &:hover::before {
+      background-color: t.color('primary');
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Active state
+    &:active::before {
+      background-color: t.color('primary');
+      width: 3px; // Shrink width when active for visual feedback
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+    }
+  }
+
+  // Range slider styles
+  &--range {
+    .#{$component}-handle {
+      &:nth-of-type(1) {
+        z-index: 3;
+      }
+    }
+    
+    // In range mode, both dots should be visible
+    .#{$component}-dot {
+      z-index: 2;
+    }
+  }
+  
+  // Value bubble - shows current value during interaction
+  &-value {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background-color: t.color('on-surface');
+    color: t.color('surface-container-highest');
+    padding: 6px 12px;
+    border-radius: 21px;
+    font-size: 14px;
+    font-weight: 600;
+    transform: translateX(-50%);
+    visibility: hidden;
+    opacity: 0;
+    transition: $bubble-transition;
+    pointer-events: none;
+    
+    // Show value when interacting
+    &--visible {
+      visibility: visible;
+      opacity: 1;
+      transition: $bubble-transition-visible;
+    }
+  }
+  
+  &--disabled {
+
+    // Disabled state
+    .#{$component}-handle {
+      cursor: default;
+      pointer-events: none;
+      
+      &::before {
+        opacity: 0.38;
+        background-color: t.color('on-surface');
+        transition: background-color 0.15s ease, opacity 0.15s ease, width 0.15s ease;
+      }
+    }
+  }
+
+  // Discrete slider with steps
+  &--discrete {
+    .#{$component}-tick {
+      width: 4px;
+      height: 4px;
+    }
+  }
+  
+  // For dragging state - visual feedback
+  &--dragging {
+    // No transitions during dragging for responsive feel
+    .#{$component}-handle,
+    .#{$component}-value {
+      transition: none;
+    }
+  }
+}

package/src/styles/components/_snackbar.scss

@@ -0,0 +1,211 @@
+// src/components/snackbar/_snackbar.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}-snackbar';
+
+.#{$component} {
+  // Base styles following modern minimal design
+  @include m.typography('body-medium');
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 280px;
+  max-width: 480px;
+  padding: 14px 16px;
+  gap: 12px;
+  
+  // Updated colors and appearance
+  background-color: rgba(32, 33, 36, 0.9);
+  color: rgb(255, 255, 255);
+  border-radius: f.get-shape('extra-small');
+  backdrop-filter: blur(8px);
+  
+  // Animation setup - separated properties for better transitions
+  opacity: 0;
+  transform: translateY(20px);
+  transition: 
+    opacity v.motion('duration-short2') v.motion('easing-standard'),
+    transform v.motion('duration-short2') v.motion('easing-standard');
+  
+  // Using a fixed z-index since 'snackbar' isn't defined in z-index tokens
+  z-index: f.get-z-index('popover');
+  pointer-events: none;
+  will-change: transform, opacity;
+  
+  @include m.elevation(2);
+
+  // Message text styles
+  &-text {
+    @include m.truncate(1);
+    flex: 1;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  
+  // Action button styles
+  &-action {
+    @include m.typography('label-large');
+    padding: 8px 12px;
+    margin: -8px -10px -8px -4px;
+    // margin-left: 4px;
+    color: rgb(138, 180, 248);
+    background: none;
+    border: none;
+    border-radius: f.get-shape('extra-small');
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 14px;
+    text-transform: capitalize;
+    white-space: nowrap;
+    @include m.motion-transition(background-color);
+    
+    &:hover {
+      background-color: rgba(138, 180, 248, 0.08);
+    }
+    
+    &:focus-visible {
+      outline: 2px solid rgb(138, 180, 248);
+      outline-offset: 0px;
+    }
+    
+    &:active {
+      background-color: rgba(138, 180, 248, 0.12);
+    }
+  }
+  
+  // Positioning variants with corrected transforms
+  &--start {
+    bottom: 24px;
+    left: 24px;
+    transform: translateY(20px);
+    
+    @include m.rtl {
+      left: auto;
+      right: 24px;
+    }
+    
+    @include m.breakpoint-down('sm') {
+      left: 16px;
+      bottom: 16px;
+      
+      @include m.rtl {
+        left: auto;
+        right: 16px;
+      }
+    }
+  }
+  
+  &--center {
+    bottom: 24px;
+    left: 50%;
+    transform: translate(-50%, 20px);
+    
+    @include m.breakpoint-down('sm') {
+      bottom: 16px;
+      width: calc(100% - 32px);
+    }
+  }
+  
+  &--end {
+    bottom: 24px;
+    right: 24px;
+    transform: translateY(20px);
+    
+    @include m.rtl {
+      right: auto;
+      left: 24px;
+    }
+    
+    @include m.breakpoint-down('sm') {
+      right: 16px;
+      bottom: 16px;
+      
+      @include m.rtl {
+        right: auto;
+        left: 16px;
+      }
+    }
+  }
+  
+  // Visible state with corrected transforms
+  &--visible {
+    opacity: 1;
+    pointer-events: auto;
+    
+    &.#{$component}--start,
+    &.#{$component}--end {
+      transform: translateY(0);
+    }
+    
+    &.#{$component}--center {
+      transform: translate(-50%, 0);
+    }
+  }
+  
+  // Multiple line variant
+  &--multiline {
+    padding-top: 14px;
+    padding-bottom: 14px;
+    
+    .#{$component}-text {
+      @include m.truncate(2);
+    }
+  }
+  
+  // Color variants
+  &--primary {
+    background-color: t.alpha('primary', 0.9);
+    
+    .#{$component}-action {
+      color: t.color('on-primary');
+      
+      &:hover {
+        background-color: t.alpha('on-primary', 0.08);
+      }
+      
+      &:active {
+        background-color: t.alpha('on-primary', 0.12);
+      }
+      
+      &:focus-visible {
+        outline-color: t.color('on-primary');
+      }
+    }
+  }
+  
+  // Accessibility
+  @include m.reduced-motion {
+    transition: none;
+    transform: none;
+    
+    &--visible {
+      transform: none;
+      
+      &.#{$component}--center {
+        transform: translateX(-50%);
+      }
+    }
+  }
+  
+  @include m.high-contrast {
+    outline: 2px solid currentColor;
+    background-color: black;
+  }
+  
+  // Mobile optimizations
+  @include m.breakpoint-down('sm') {
+    min-width: auto;
+    max-width: none;
+    margin: 0 16px;
+  }
+
+  // Print styles
+  @include m.print {
+    display: none;
+  }
+}