mtrl 0.5.3 → 0.5.4

package/src/styles/components/_chips.scss

@@ -1,639 +1,643 @@
 // 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;
+@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';
+$component: "#{base.$prefix}-chip";
+$container: "#{base.$prefix}-chips";
 
 // Chip component styling
 .#{$component} {
-  // Base styles
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: v.chip('height');
-  padding: 0 v.chip('padding-horizontal');
-  border-radius: v.chip('border-radius');
-  background-color: transparent;
-  max-width: 100%;
-  user-select: none;
-  cursor: pointer;
-  
-  // Typography
-  @include m.typography('label-large');
-  
-  // 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 {
-    outline: none;
-  }
-  
-  &:focus-visible {
-    outline: 2px solid t.color('outline');
-    outline-offset: 2px;
-  }
-  
-  // Active state - applied when the chip has a menu open
-  &--active {
-    // Base active state styling
-    // Will use variant-specific implementations below
-    
-    // ARIA attribute to indicate active state for accessibility
-    &[aria-expanded="true"] {
-      // For compatibility with ARIA
-    }
-  }
-  
-  // Disabled state
-  &--disabled {
-    opacity: 0.38;
-    pointer-events: none;
-  }
-  
-  // Content container
-  &-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    gap: v.spacing('2');
-  }
-  
-  // Ensure proper layout with icons - independent of scrollable state
-  &-leading-icon,
-  &-trailing-icon {
+    // Base styles
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: v.chip('icon-size');
-    height: v.chip('icon-size');
-    flex-shrink: 0;
-    position: relative; // Add this to ensure stable positioning
-    
-    svg {
-      width: v.chip('icon-size');
-      height: v.chip('icon-size');
-    }
-  }
-  
-  &-leading-icon {
-    margin-right: 0; // Gap is handled by the content container
-  }
-  
-  &-trailing-icon {
-    margin-left: 0; // Gap is handled by the content container
-    
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-  
-  &-text {
-    // Allow text to display normally
-    white-space: nowrap;
-    overflow: visible;
-  }
-  
-  // Selected state (base)
-  &--selected {
-    font-weight: 500;
-  }
-  
-  // Ripple container - state layers for interaction feedback
-  .ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    pointer-events: none;
-    background-color: currentColor;
-    opacity: 0.12;
-  }
-  
-  // ====== CHIP VARIANTS ======
-  
-  // Filled chip
-  &--filled {
-    background-color: t.color('surface-container-highest');
-    color: t.color('on-surface');
-    
-    &:hover::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.08;
-      pointer-events: none;
-      border-radius: v.chip('border-radius');
-    }
-    
-    &:active::after,
-    &.#{$component}--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::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
-        opacity: 0.08;
-        pointer-events: none;
-        border-radius: inherit;
-      }
-      
-      &:active::after,
-      &.#{$component}--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.alpha('outline', v.chip('outlined-border-opacity'));
-    color: t.color('on-surface');
-    
-    &:hover::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.08;
-      pointer-events: none;
-      border-radius: inherit;
+    height: v.chip("height");
+    padding: 0 v.chip("padding-horizontal");
+    border-radius: v.chip("border-radius");
+    background-color: transparent;
+    max-width: 100%;
+    user-select: none;
+    cursor: pointer;
+
+    // Typography
+    @include m.typography("label-large");
+    // 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 {
+        outline: none;
     }
-    
+
     &:focus-visible {
-      border-color: t.alpha('outline', v.chip('outlined-border-focus-opacity'));
-    }
-    
-    &:active::after,
-    &.#{$component}--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: transparent;
-      background-color: t.color('secondary-container');
-      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;
-      }
-      
-      &:active::after,
-      &.#{$component}--active::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
-        opacity: 0.12;
-        pointer-events: none;
-        border-radius: inherit;
-      }
+        outline: 2px solid t.color("outline");
+        outline-offset: 2px;
     }
-  }
-  
-  // Elevated chip
-  &--elevated {
-    background-color: t.color('surface-container-low');
-    color: t.color('on-surface');
-    box-shadow: f.get-elevation(1);
-    
-    &:hover::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.08;
-      pointer-events: none;
-      border-radius: inherit;
-    }
-    
-    &:active::after,
-    &.#{$component}--active::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.12;
-      pointer-events: none;
-      border-radius: inherit;
+
+    // Active state - applied when the chip has a menu open
+    &--active {
+        // Base active state styling
+        // Will use variant-specific implementations below
+
+        // ARIA attribute to indicate active state for accessibility
+        &[aria-expanded="true"] {
+            // For compatibility with ARIA
+        }
     }
-    
-    &.#{$component}--selected {
-      background-color: t.color('secondary-container');
-      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;
-      }
-      
-      &:active::after,
-      &.#{$component}--active::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
-        opacity: 0.12;
+
+    // Disabled state
+    &--disabled {
+        opacity: 0.38;
         pointer-events: none;
-        border-radius: inherit;
-      }
-    }
-  }
-  
-  // Filter chip
-  &--filter {
-    color: t.color('on-surface');
-    position: relative;
-    border: 1px solid t.alpha('outline', v.chip('outlined-border-opacity'));
-    
-    // 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: calc(v.chip('border-radius') - 1px);
     }
-    
-    &:active::after,
-    &.#{$component}--active::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.12;
-      pointer-events: none;
-      border-radius: calc(v.chip('border-radius') - 1px);
+
+    // Content container
+    &-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: v.spacing("2");
     }
-    
-    &.#{$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;
+
+    // Ensure proper layout with icons - independent of scrollable state
+    &-leading-icon,
+    &-trailing-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: v.chip("icon-size");
+        height: v.chip("icon-size");
         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: calc(v.chip('border-radius') - 1px);
-      }
-      
-      &:active::after,
-      &.#{$component}--active::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
-        opacity: 0.12;
-        pointer-events: none;
-        border-radius: calc(v.chip('border-radius') - 1px);
-      }
+        position: relative; // Add this to ensure stable positioning
+
+        svg {
+            width: v.chip("icon-size");
+            height: v.chip("icon-size");
+        }
     }
-  }
-  
-  // Assist chip
-  &--assist {
-    background-color: t.color('surface-container-low');
-    color: t.color('on-surface');
-    
-    .#{$component}-leading-icon {
-      color: t.color('primary');
+
+    &-leading-icon {
+        margin-right: 0; // Gap is handled by the content container
+    }
+
+    &-trailing-icon {
+        margin-left: 0; // Gap is handled by the content container
+
+        &:hover {
+            opacity: 0.8;
+        }
     }
-    
-    &:hover::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.08;
-      pointer-events: none;
-      border-radius: v.chip('border-radius');
+
+    &-text {
+        // Allow text to display normally
+        white-space: nowrap;
+        overflow: visible;
     }
-    
-    &:active::after,
-    &.#{$component}--active::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.12;
-      pointer-events: none;
-      border-radius: v.chip('border-radius');
+
+    // Selected state (base)
+    &--selected {
+        font-weight: 500;
     }
-    
-    &.#{$component}--selected {
-      background-color: t.color('secondary-container');
-      color: t.color('on-secondary-container');
-      
-      .#{$component}-leading-icon {
-        color: t.color('on-secondary-container');
-      }
-      
-      &:hover::after {
-        content: '';
+
+    // Ripple container - state layers for interaction feedback
+    .ripple {
         position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
-        opacity: 0.08;
+        border-radius: 50%;
+        transform: scale(0);
         pointer-events: none;
-        border-radius: inherit;
-      }
-      
-      &:active::after,
-      &.#{$component}--active::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
+        background-color: currentColor;
         opacity: 0.12;
-        pointer-events: none;
-        border-radius: inherit;
-      }
     }
-  }
-  
-  // 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;
-      
-      &:hover {
-        color: t.color('error');
-      }
+
+    // ====== CHIP VARIANTS ======
+
+    // Filled chip
+    &--filled {
+        background-color: t.color("surface-container-highest");
+        color: t.color("on-surface");
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: v.chip("border-radius");
+        }
+
+        &:active::after,
+        &.#{$component}--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::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
     }
-    
-    &:hover::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.08;
-      pointer-events: none;
-      border-radius: inherit;
+
+    // Outlined chip
+    &--outlined {
+        border: 1px solid t.alpha("outline", v.chip("outlined-border-opacity"));
+        color: t.color("on-surface");
+
+        &: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::after,
+        &.#{$component}--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: transparent;
+            background-color: t.color("secondary-container");
+            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;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
     }
-    
-    &:active::after,
-    &.#{$component}--active::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.12;
-      pointer-events: none;
-      border-radius: inherit;
+
+    // Elevated chip
+    &--elevated {
+        background-color: t.color("surface-container-low");
+        color: t.color("on-surface");
+        box-shadow: f.get-elevation(1);
+
+        &:hover::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.08;
+            pointer-events: none;
+            border-radius: inherit;
+        }
+
+        &:active::after,
+        &.#{$component}--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::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
     }
-  }
-  
-  // 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');
-      }
+
+    // Filter chip
+    &--filter {
+        color: t.color("on-surface");
+        position: relative;
+        border: 1px solid t.alpha("outline", v.chip("outlined-border-opacity"));
+
+        // 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: calc(v.chip("border-radius") - 1px);
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: calc(v.chip("border-radius") - 1px);
+        }
+
+        &.#{$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: calc(v.chip("border-radius") - 1px);
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: calc(v.chip("border-radius") - 1px);
+            }
+        }
     }
-    
-    &:hover::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.08;
-      pointer-events: none;
-      border-radius: inherit;
+
+    // Assist chip
+    &--assist {
+        background-color: t.color("surface-container-low");
+        color: t.color("on-surface");
+
+        .#{$component}-leading-icon {
+            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: v.chip("border-radius");
+        }
+
+        &:active::after,
+        &.#{$component}--active::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background-color: t.color("on-surface");
+            opacity: 0.12;
+            pointer-events: none;
+            border-radius: v.chip("border-radius");
+        }
+
+        &.#{$component}--selected {
+            background-color: t.color("secondary-container");
+            color: t.color("on-secondary-container");
+
+            .#{$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;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+        }
     }
-    
-    &:active::after,
-    &.#{$component}--active::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: t.color('on-surface');
-      opacity: 0.12;
-      pointer-events: none;
-      border-radius: inherit;
+
+    // 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;
+
+            &:hover {
+                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;
+        }
+
+        &:active::after,
+        &.#{$component}--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::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
-        opacity: 0.08;
-        pointer-events: none;
-        border-radius: inherit;
-      }
-      
-      &:active::after,
-      &.#{$component}--active::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: t.color('on-secondary-container');
-        opacity: 0.12;
-        pointer-events: none;
-        border-radius: inherit;
-      }
+
+    // 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;
+        }
+
+        &:active::after,
+        &.#{$component}--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::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.08;
+                pointer-events: none;
+                border-radius: inherit;
+            }
+
+            &:active::after,
+            &.#{$component}--active::after {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background-color: t.color("on-secondary-container");
+                opacity: 0.12;
+                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;
-  }
+    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;
-  
-  // Label styling
-  &-label {
-    @include m.typography('label-medium');
-    font-size: 18px;
-    color: t.color('on-surface-variant');
-    margin-bottom: v.spacing('2');
-    display: block;
-    width: 100%;
-  }
-  
-  // Layout with label
-  &--with-label {
-    display: flex;
-    flex-direction: column;
-    
-    // When label is at the end
-    &.#{$container}--label-end {
-      flex-direction: column-reverse;
-      
-      .#{$container}-label {
-        margin-bottom: 0;
-        margin-top: v.spacing('2');
-      }
-    }
-  }
-  
-  // Container for chips
-  &-container {
     display: flex;
     flex-wrap: wrap;
-    gap: v.spacing('2');
+    gap: v.spacing("2");
     width: 100%;
-  }
-  
-  // Important: Scrollable state only affects the container, not the chip icons
-  &--scrollable {
-    .#{$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
-      }
+    min-height: fit-content;
+    height: auto;
+
+    // Label styling
+    &-label {
+        @include m.typography("label-medium");
+        font-size: 16px;
+        color: t.color("on-surface-variant");
+        // margin-bottom: v.spacing("2");
+        display: block;
+        width: 100%;
     }
-  }
-  
-  &--vertical {
-    .#{$container}-container {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: v.spacing('2');
+
+    // Layout with label
+    &--with-label {
+        display: flex;
+        flex-direction: column;
+
+        // When label is at the end
+        &.#{$container}--label-end {
+            flex-direction: column-reverse;
+
+            .#{$container}-label {
+                margin-bottom: 0;
+                margin-top: v.spacing("2");
+            }
+        }
+    }
+
+    // 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 {
+        .#{$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
+            }
+        }
+    }
+
+    &--vertical {
+        .#{$container}-container {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: v.spacing("2");
+        }
     }
-  }
-}
+}