mtrl 0.2.6 → 0.2.8

package/src/styles/components/_search.scss

@@ -0,0 +1,306 @@
+// src/components/search/_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;
+
+$component: '#{base.$prefix}-search';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 720px;
+  min-width: 360px;
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+  z-index: 1; 
+  
+  // Container
+  &-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 0 16px;
+    border-radius: v.shape('pill');
+    background-color: t.color('surface-container-high');
+    transition: background-color 0.2s ease;
+    overflow: hidden; 
+    
+    .#{$component}--disabled & {
+      opacity: 0.38;
+      pointer-events: none;
+    }
+  }
+  
+  // Leading Icon
+  &-leading-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    margin-right: 16px;
+    color: t.color('on-surface');
+    cursor: pointer;
+    flex-shrink: 0;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      border-radius: 50%;
+    }
+  }
+  
+  // Input wrapper
+  &-input-wrapper {
+    flex: 1;
+    min-width: 0;
+    height: 100%; 
+    display: flex;
+    align-items: center;
+  }
+  
+  // Input field
+  &-input {
+    width: 100%;
+    height: 100%; 
+    min-height: 36px; 
+    border: none;
+    background: transparent;
+    font-size: 16px;
+    color: t.color('on-surface');
+    padding: 8px 0; 
+    box-sizing: border-box;
+    outline: none;
+    
+    &::placeholder {
+      color: t.color('on-surface-variant');
+    }
+    
+    .#{$component}--disabled & {
+      cursor: not-allowed;
+    }
+  }
+  
+  // Clear button
+  &-clear-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    margin-left: 16px;
+    color: t.color('on-surface-variant');
+    cursor: pointer;
+    flex-shrink: 0;
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.2s ease, visibility 0s;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+    
+    &--hidden {
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.2s ease, visibility 0s 0.2s;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      border-radius: 50%;
+    }
+  }
+  
+  // Trailing icons
+  &-trailing-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    margin-left: 16px;
+    color: t.color('on-surface-variant');
+    cursor: pointer;
+    flex-shrink: 0;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      border-radius: 50%;
+    }
+  }
+  
+  // Avatar
+  &-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 16px;
+    min-width: 30px;
+    height: 30px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    overflow: hidden;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  // Search variants
+  &--bar {
+    border-radius: v.shape('pill');
+    overflow: hidden;
+    transition: max-width 0.3s ease, width 0.3s ease;
+  }
+  
+  &--view {
+    border-radius: 0;
+    max-width: 100%;
+    width: 100%;
+    
+    .#{$component}-container {
+      border-radius: 0;
+    }
+    
+    // For docked view mode
+    @include m.breakpoint-up('md') {
+      border-radius: v.shape('extra-large');
+      
+      .#{$component}-container {
+        border-radius: v.shape('extra-large') v.shape('extra-large') 0 0;
+        height: 56px;
+      }
+    }
+  }
+  
+  // Divider
+  &-divider {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: t.color('outline');
+    opacity: 0.5;
+  }
+  
+  // Suggestions container
+  &-suggestions-container {
+    display: none;
+    background-color: t.color('surface-container-high');
+    max-height: 400px;
+    overflow-y: auto;
+    border-bottom-left-radius: v.shape('medium');
+    border-bottom-right-radius: v.shape('medium');
+    
+    &--visible {
+      display: block;
+    }
+    
+    // For docked view mode
+    @include m.breakpoint-up('md') {
+      border-radius: 0 0 v.shape('extra-large') v.shape('extra-large');
+    }
+  }
+  
+  // Suggestions list
+  &-suggestions-list {
+    list-style: none;
+    padding: 8px 0;
+    margin: 0;
+  }
+  
+  // Suggestion item
+  &-suggestion-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    min-height: 48px; 
+    font-size: 16px;
+    color: t.color('on-surface');
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    
+    &:hover, &:focus {
+      background-color: t.alpha('on-surface', 0.05);
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    // Highlight matched text
+    strong {
+      font-weight: 600;
+      color: t.color('on-surface');
+    }
+  }
+  
+  // Suggestion item icon
+  &-suggestion-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-right: 16px;
+    color: t.color('on-surface-variant');
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Suggestion item text
+  &-suggestion-text {
+    flex: 1;
+  }
+  
+  // Focus state
+  &--focused {
+    .#{$component}-container {
+      // No additional styles needed for focus in MD3
+    }
+  }
+  
+  // Full width
+  &--fullwidth {
+    max-width: 100%;
+  }
+  
+  // Expanded state (transitioning from bar to view)
+  &--expanded {
+    max-width: 100%;
+    width: 100%;
+  }
+}

package/src/styles/components/_segmented-button.scss

@@ -0,0 +1,117 @@
+// src/components/segmented-button/_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;
+
+$component: '#{base.$prefix}-segmented-button';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: v.shape('full');
+  border: 1px solid t.color('outline');
+  background-color: transparent;
+  overflow: hidden;
+  
+  // Disabled state
+  &--disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  // Segment container
+  &-segment {
+    // Base styles
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-width: 48px;
+    padding: 0 12px;
+    border: none;
+    background-color: transparent;
+    color: t.color('on-surface');
+    cursor: pointer;
+    user-select: none;
+    
+    // Fix segmented borders
+    &:not(:first-child) {
+      border-left: 1px solid t.color('outline');
+    }
+    
+    // Typography
+    @include m.typography('label-large');
+    
+    // Transition
+    @include m.motion-transition(
+      background-color, 
+      color
+    );
+    
+    // States
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('outline');
+      outline-offset: -2px;
+    }
+    
+    &:hover:not(.#{$component}-segment--disabled) {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    // Selected state
+    &--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+      
+      &:hover:not(.#{$component}-segment--disabled) {
+        background-color: t.alpha('secondary-container', 0.8);
+      }
+    }
+    
+    // Disabled state
+    &--disabled {
+      opacity: 0.38;
+      cursor: not-allowed;
+    }
+    
+    // Text element
+    &-text {
+      // For when both icon and text are present
+      margin: 0 auto;
+    }
+    
+    // Icon styles
+    &-icon, &-checkmark {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+      
+      + .#{$component}-segment-text {
+        margin-left: 8px;
+      }
+    }
+    
+    // Space the checkmark icon
+    &-checkmark + .#{$component}-segment-text {
+      margin-left: 8px;
+    }
+  }
+}

package/src/{components/slider/_styles.scss → styles/components/_slider.scss}

@@ -5,8 +5,11 @@
 @use '../../styles/abstract/mixins' as m;
 @use '../../styles/abstract/theme' as t;
 
-// $transform: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
-$transform: none;
+// Define the transition properties for smoother animations with absolute positioning
+$track-transition: left 0.2s ease, right 0.2s ease;
+$handle-transition: left 0.2s ease, transform 0.2s ease;
+$bubble-transition: left 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
+$bubble-transition-visible: left 0.2s ease, opacity 0.2s ease, visibility 0s;
 
 $component: '#{base.$prefix}-slider';
 
@@ -14,17 +17,62 @@ $component: '#{base.$prefix}-slider';
   // Base styles
   position: relative;
   width: 100%;
-  height: 40px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   user-select: none;
   touch-action: none;
+  padding: 8px 0;
   
   // 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;
+  }
+
   &-track {
     position: relative;
     width: 100%;
@@ -42,15 +90,15 @@ $component: '#{base.$prefix}-slider';
     }
   }
  
-  // Thumb - updated with T-shape and proper focus styles
-  &-thumb {
+  // 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: $transform;
+    transition: $handle-transition;
     width: 16px;
     height: 50px;
     border-radius: 16px;
@@ -66,7 +114,7 @@ $component: '#{base.$prefix}-slider';
       // Additional styling when focused
     }
 
-    // Create a T-shaped thumb using pseudo-elements
+    // Create a T-shaped handle using pseudo-elements
     &::before {
       pointer-events: none;
       content: '';
@@ -103,7 +151,7 @@ $component: '#{base.$prefix}-slider';
       pointer-events: auto;
     }
     
-    // Make thumb line slimmer during dragging (feedback)
+    // Make handle line slimmer during dragging (feedback)
     .#{$component}--dragging & {
       &::before {
         width: 3px;
@@ -169,7 +217,7 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    transition: $transform;
+    transition: $track-transition;
     border-radius: 2px;
     opacity: 0.24;
     z-index: 1;
@@ -198,7 +246,7 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    transition: $transform;
+    transition: $track-transition;
     border-radius: 2px;
     z-index: 1;
 
@@ -223,9 +271,8 @@ $component: '#{base.$prefix}-slider';
     height: 100%;
     background-color: t.color('primary');
     transform-origin: left center;
-    transition: $transform;
+    transition: $track-transition;
     border-radius: 2px;
-    width: 100%;
     z-index: 0;
     
     .#{$component}--secondary & {
@@ -304,14 +351,14 @@ $component: '#{base.$prefix}-slider';
   // Tick marks
   &-tick {
     position: absolute;
-    width: 2px;
-    height: 2px;
+    width: 4px;
+    height: 4px;
     background-color: t.color('outline');
     border-radius: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
-    opacity: 1;
+    opacity: 0.8;
     
     &:last-child, &:first-child {
       display: none
@@ -333,6 +380,7 @@ $component: '#{base.$prefix}-slider';
     // Inactive tick (unfilled)
     &--inactive {
       background-color: t.color('primary');
+      opacity: 0.5;
 
       .#{$component}--secondary & {
         background-color: t.color('secondary');
@@ -351,7 +399,7 @@ $component: '#{base.$prefix}-slider';
   
   // Range slider styles
   &--range {
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &:nth-of-type(1) {
         z-index: 3;
       }
@@ -377,14 +425,14 @@ $component: '#{base.$prefix}-slider';
     transform: translateX(-50%);
     visibility: hidden;
     opacity: 0;
-    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
+    transition: $bubble-transition;
     pointer-events: none;
     
     // Show value when interacting
     &--visible {
       visibility: visible;
       opacity: 1;
-      transition: opacity 0.2s ease, visibility 0s;
+      transition: $bubble-transition-visible;
     }
   }
   
@@ -398,19 +446,29 @@ $component: '#{base.$prefix}-slider';
   
   // Sizes
   &--small {
-    height: 32px;
+    .#{$component}-container {
+      height: 32px;
+    }
     
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &::before {
         height: 34px;
       }
     }
   }
   
+  &--medium {
+    .#{$component}-container {
+      height: 40px;
+    }
+  }
+  
   &--large {
-    height: 48px;
+    .#{$component}-container {
+      height: 48px;
+    }
     
-    .#{$component}-thumb {
+    .#{$component}-handle {
       &::before {
         height: 48px;
       }
@@ -423,7 +481,8 @@ $component: '#{base.$prefix}-slider';
     .#{$component}-start-track, 
     .#{$component}-active-track, 
     .#{$component}-remaining-track, 
-    .#{$component}-thumb {
+    .#{$component}-handle,
+    .#{$component}-value {
       transition: none;
     }
   }

package/src/{components/switch/_styles.scss → styles/components/_switch.scss}

@@ -89,8 +89,6 @@ $component: '#{base.$prefix}-switch';
 
   // Label position variants
   &--label-start {
-    flex-direction: row-reverse;
-
     .#{$component}-label {
       margin-left: 0;
       margin-right: 12px;