mtrl 0.3.1 → 0.3.3

package/src/styles/abstract/_mixins.scss

@@ -37,17 +37,31 @@ $icons: (
 }
 
 // State Layers
-@mixin state-layer($color, $state: 'hover', $selector: '&::before') {
+@mixin state-layer($color, $state: 'hover', $selector: false) {
   position: relative;
   
-  #{$selector} {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-color: $color;
-    opacity: f.get-state-opacity($state);
-    pointer-events: none;
-    border-radius: inherit;
+  @if $selector == false {
+    // Default behavior - create a pseudo-element for the state layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: $color;
+      opacity: f.get-state-opacity($state);
+      pointer-events: none;
+      border-radius: inherit;
+    }
+  } @else {
+    // Use the provided selector
+    #{$selector} {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: $color;
+      opacity: f.get-state-opacity($state);
+      pointer-events: none;
+      border-radius: inherit;
+    }
   }
 }
 

package/src/styles/abstract/_variables.scss

@@ -189,11 +189,18 @@ $card: (
   'padding': 16px
 ) !default;
 
-// Chip configuration
+// Chip configuration - updated with MD3 values
 $chip-config: (
   'height': 32px,
   'border-radius': 8px,
-  'padding-horizontal': 12px
+  'padding-horizontal': 12px,
+  'outlined-border-opacity': 0.12,
+  'outlined-border-hover-opacity': 0.29,
+  'outlined-border-focus-opacity': 0.38,
+  'outlined-selected-border-opacity': 0,
+  'suggestion-height': 48px,
+  'icon-size': 18px,
+  'suggestion-icon-size': 24px
 ) !default;
 
 $button: (
@@ -272,6 +279,9 @@ $spacing-scale: (
   @return map.get($card, $key);
 }
 
-@function chip($key) {
-  @return map.get($chip-config, $key);
+@function chip($key, $fallback: null) {
+  @if map.has-key($chip-config, $key) {
+    @return map.get($chip-config, $key);
+  }
+  @return $fallback;
 }

package/src/styles/components/_card.scss

@@ -302,7 +302,7 @@ $component: '#{base.$prefix}-card';
   
   // State classes
   &--state-disabled {
-    opacity: 0.38; // Use MTRL standard opacity
+    opacity: 0.38; // Use mtrl standard opacity
     pointer-events: none;
   }
   

package/src/styles/components/_chip.scss

@@ -1,12 +1,14 @@
-// src/components/chip/_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;
+// src/styles/components/_chips.scss
+@use '../abstract/base' as base;
+@use '../abstract/variables' as v;
+@use '../abstract/functions' as f;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
 
 $component: '#{base.$prefix}-chip';
+$container: '#{base.$prefix}-chips';
 
+// Chip component styling
 .#{$component} {
   // Base styles
   position: relative;
@@ -18,15 +20,19 @@ $component: '#{base.$prefix}-chip';
   border-radius: v.chip('border-radius');
   background-color: transparent;
   max-width: 100%;
-  overflow: hidden;
   user-select: none;
   cursor: pointer;
   
   // Typography
   @include m.typography('label-large');
   
-  // Interaction styles
-  @include m.motion-transition(background-color, color, border-color, box-shadow);
+  // Enhanced transition for width changes
+  transition: background-color v.motion('duration-short4') v.motion('easing-standard'),
+              color v.motion('duration-short4') v.motion('easing-standard'),
+              border-color v.motion('duration-short4') v.motion('easing-standard'),
+              box-shadow v.motion('duration-short4') v.motion('easing-standard'),
+              padding v.motion('duration-short4') v.motion('easing-standard'),
+              width v.motion('duration-short4') v.motion('easing-standard');
   
   // Focus styles
   &:focus {
@@ -51,48 +57,50 @@ $component: '#{base.$prefix}-chip';
     justify-content: center;
     width: 100%;
     height: 100%;
+    gap: v.spacing('2');
   }
   
-  // Ensure proper layout with icons
+  // Ensure proper layout with icons - independent of scrollable state
   &-leading-icon,
   &-trailing-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 18px;
-    height: 18px;
+    min-width: v.chip('icon-size');
+    height: v.chip('icon-size');
+    flex-shrink: 0;
+    position: relative; // Add this to ensure stable positioning
     
     svg {
-      width: 18px;
-      height: 18px;
+      width: v.chip('icon-size');
+      height: v.chip('icon-size');
     }
   }
   
   &-leading-icon {
-    margin-right: 8px;
+    margin-right: 0; // Gap is handled by the content container
   }
   
   &-trailing-icon {
-    margin-left: 8px;
+    margin-left: 0; // Gap is handled by the content container
     
     &:hover {
-      opacity: 0.7;
+      opacity: 0.8;
     }
   }
   
   &-text {
-    // Text truncation for long chip labels
-    @include m.truncate;
+    // Allow text to display normally
+    white-space: nowrap;
+    overflow: visible;
   }
   
-  // Selected state
+  // Selected state (base)
   &--selected {
-    // Default selected state styling (can be overridden by variants)
-    background-color: t.alpha('on-surface', 0.12);
     font-weight: 500;
   }
   
-  // Ripple container
+  // Ripple container - state layers for interaction feedback
   .ripple {
     position: absolute;
     border-radius: 50%;
@@ -102,101 +110,211 @@ $component: '#{base.$prefix}-chip';
     opacity: 0.12;
   }
   
-  // Variants
+  // ====== CHIP VARIANTS ======
+  
+  // Filled chip
   &--filled {
     background-color: t.color('surface-container-highest');
     color: t.color('on-surface');
     
-    &:hover {
-      @include m.state-layer(t.color('on-surface'), 'hover');
+    &:hover::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.08;
+      pointer-events: none;
+      border-radius: inherit;
     }
     
-    &:active {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
+    &:active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: inherit;
     }
     
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
       
-      &:hover {
-        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      &:hover::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.08;
+        pointer-events: none;
+        border-radius: inherit;
       }
       
-      &:active {
-        @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      &:active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
       }
     }
   }
   
+  // Outlined chip
   &--outlined {
-    border: 1px solid t.color('outline');
+    border: 1px solid t.alpha('outline', v.chip('outlined-border-opacity'));
     color: t.color('on-surface');
     
-    &:hover {
-      @include m.state-layer(t.color('on-surface'), 'hover');
+    &:hover::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.08;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+    
+    &:focus-visible {
+      border-color: t.alpha('outline', v.chip('outlined-border-focus-opacity'));
     }
     
-    &:active {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
+    &:active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: inherit;
     }
     
     &.#{$component}--selected {
-      border-color: t.color('outline');
+      border-color: transparent;
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
       
-      &:hover {
-        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      &:hover::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.08;
+        pointer-events: none;
+        border-radius: inherit;
       }
     }
   }
   
+  // Elevated chip
   &--elevated {
     background-color: t.color('surface-container-low');
     color: t.color('on-surface');
-    @include m.elevation(1);
+    box-shadow: f.get-elevation(1);
     
-    &:hover {
-      @include m.state-layer(t.color('on-surface'), 'hover');
-      @include m.elevation(2);
+    &:hover::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.08;
+      pointer-events: none;
+      border-radius: inherit;
     }
     
-    &:active {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
-      @include m.elevation(1);
+    &:active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: inherit;
     }
     
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
       
-      &:hover {
-        @include m.state-layer(t.color('on-secondary-container'), 'hover');
+      &:hover::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.08;
+        pointer-events: none;
+        border-radius: inherit;
       }
     }
   }
   
-  // Filter chip specific styling
+  // Filter chip
   &--filter {
-    background-color: t.color('surface-container-highest');
+    
     color: t.color('on-surface');
+    position: relative;
+    border: 1px solid t.alpha('outline', v.chip('outlined-border-opacity'));
     
-    &:hover {
-      @include m.state-layer(t.color('on-surface'), 'hover');
+    // Hover state for unselected chips
+    &:hover::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.08;
+      pointer-events: none;
+      border-radius: inherit;
     }
     
     &.#{$component}--selected {
+      
+      padding-left: 8px;
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
-      
+      --checkmark-color: currentColor; // Will inherit from text color
+      border: none;
       .#{$component}-leading-icon {
         color: t.color('on-secondary-container');
       }
+      
+      // Use ::before exclusively for the checkmark icon with mask technique
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        background-color: var(--checkmark-color);
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
+        -webkit-mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-size: contain;
+        margin-right: 8px;
+        flex-shrink: 0;
+        position: static;
+        animation: checkmark-appear v.motion('duration-short4') v.motion('easing-emphasized') forwards;
+      }
+      
+      // Hover state for selected chips
+      &:hover::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.08;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
-  // Assist chip specific styling
+  // Assist chip
   &--assist {
     background-color: t.color('surface-container-low');
     color: t.color('on-surface');
@@ -205,6 +323,16 @@ $component: '#{base.$prefix}-chip';
       color: t.color('primary');
     }
     
+    &:hover::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.08;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+    
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
@@ -212,13 +340,24 @@ $component: '#{base.$prefix}-chip';
       .#{$component}-leading-icon {
         color: t.color('on-secondary-container');
       }
+      
+      &:hover::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.08;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
-  // Input chip specific styling
+  // Input chip
   &--input {
     background-color: t.color('surface-container-highest');
     color: t.color('on-surface');
+    border-radius: v.chip('border-radius');
     
     .#{$component}-trailing-icon {
       cursor: pointer;
@@ -227,89 +366,160 @@ $component: '#{base.$prefix}-chip';
         color: t.color('error');
       }
     }
+    
+    &:hover::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.08;
+      pointer-events: none;
+      border-radius: inherit;
+    }
   }
   
-  // Suggestion chip styling
+  // Suggestion chip
   &--suggestion {
     background-color: t.color('surface-container');
     color: t.color('on-surface');
+    height: v.chip('suggestion-height');
+    
+    .#{$component}-leading-icon {
+      width: v.chip('suggestion-icon-size');
+      height: v.chip('suggestion-icon-size');
+      
+      svg {
+        width: v.chip('suggestion-icon-size');
+        height: v.chip('suggestion-icon-size');
+      }
+    }
+    
+    &:hover::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.08;
+      pointer-events: none;
+      border-radius: inherit;
+    }
     
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
-    }
-  }
-  
-  // Size variants
-  &--small {
-    height: 24px;
-    padding: 0 8px;
-    font-size: 12px;
-    
-    .#{$component}-leading-icon,
-    .#{$component}-trailing-icon {
-      width: 16px;
-      height: 16px;
       
-      svg {
-        width: 16px;
-        height: 16px;
+      &:hover::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.08;
+        pointer-events: none;
+        border-radius: inherit;
       }
     }
   }
+}
+
+// Animation for checkmark appearance
+@keyframes checkmark-appear {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Chips container
+.#{$container} {
+  display: flex;
+  flex-wrap: wrap;
+  gap: v.spacing('2');
+  width: 100%;
+  min-height: fit-content;
+  height: auto;
   
-  &--medium {
-    // Default size, styles already defined
+  // Label styling
+  &-label {
+    @include m.typography('title-medium');
+    color: t.color('on-surface-variant');
+    margin-bottom: v.spacing('2');
+    display: block;
+    width: 100%;
   }
   
-  &--large {
-    height: 40px;
-    padding: 0 16px;
-    font-size: 16px;
+  // Layout with label
+  &--with-label {
+    display: flex;
+    flex-direction: column;
     
-    .#{$component}-leading-icon,
-    .#{$component}-trailing-icon {
-      width: 20px;
-      height: 20px;
+    // When label is at the end
+    &.#{$container}--label-end {
+      flex-direction: column-reverse;
       
-      svg {
-        width: 20px;
-        height: 20px;
+      .#{$container}-label {
+        margin-bottom: 0;
+        margin-top: v.spacing('2');
       }
     }
   }
-}
-
-// Chip set container
-.#{base.$prefix}-chip-set {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
   
+  // Container for chips
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: v.spacing('2');
+    width: 100%;
+  }
+  
+  // Important: Scrollable state only affects the container, not the chip icons
   &--scrollable {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    padding-bottom: 8px;
-    margin-bottom: -8px; // Compensate for padding to maintain vertical alignment
-    -webkit-overflow-scrolling: touch; // Smooth scrolling on iOS
-    
-    // Hide scrollbar in various browsers while maintaining functionality
-    &::-webkit-scrollbar {
-      height: 4px;
-    }
-    
-    &::-webkit-scrollbar-thumb {
-      background-color: t.alpha('on-surface', 0.2);
-      border-radius: 4px;
+    .#{$container}-container {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      overflow-y: visible; // Don't clip chips vertically
+      -webkit-overflow-scrolling: touch;
+      scroll-behavior: smooth;
+      padding-bottom: v.spacing('2');
+      
+      // Enhanced scrollable behavior
+      position: relative;
+      white-space: nowrap;
+      
+      // Improved scrollbar styling
+      &::-webkit-scrollbar {
+        height: 4px;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background-color: t.alpha('on-surface', 0.2);
+        border-radius: 4px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background-color: t.alpha('on-surface', 0.05);
+        border-radius: 4px;
+      }
+      
+      // Style for Firefox
+      scrollbar-width: thin;
+      scrollbar-color: t.alpha('on-surface', 0.2) t.alpha('on-surface', 0.05);
+      
+      // Ensure chip visibility without affecting internal structure
+      .#{$component} {
+        flex-shrink: 0; // Prevent chips from shrinking
+      }
     }
-    
-    // Style for Firefox
-    scrollbar-width: thin;
-    scrollbar-color: t.alpha('on-surface', 0.2) transparent;
   }
   
   &--vertical {
-    flex-direction: column;
-    align-items: flex-start;
+    .#{$container}-container {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: v.spacing('2');
+    }
   }
 }