mtrl 0.5.2 → 0.5.3

package/src/styles/components/_chips.scss

@@ -0,0 +1,639 @@
+// 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;
+  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 {
+    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;
+    }
+    
+    &: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;
+      }
+    }
+  }
+  
+  // 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;
+      }
+    }
+  }
+  
+  // 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);
+      }
+    }
+  }
+  
+  // 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;
+      }
+    }
+  }
+  
+  // 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;
+    }
+  }
+  
+  // 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;
+  }
+}
+
+// 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');
+    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');
+    }
+  }
+}