mtrl 0.3.8 → 0.4.0

package/src/styles/components/_chips.scss

@@ -1,638 +0,0 @@
-// 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('title-medium');
-    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');
-    }
-  }
-}