mtrl 0.3.1 → 0.3.2

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');
+    }
   }
 }

package/src/styles/components/_tabs.scss

@@ -14,7 +14,7 @@ $container: '#{base.$prefix}-tabs';
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: t.color('surface'); // MD3: Surface color
+  // background-color: t.color('surface'); // MD3: Surface color
   box-sizing: border-box;
   
   // Basic container sizing

package/CLAUDE.md

@@ -1,33 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Build & Development Commands
-- Build: `bun run build`
-- Dev server: `bun run dev`
-- Tests: `bun test`
-- Single test: `bun test test/components/button.test.ts`
-- Watch tests: `bun test --watch`
-- Test with UI: `bun test --watch --ui`
-- Test coverage: `bun test --coverage`
-- Docs: `bun run docs` (uses TypeDoc)
-
-## Code Conventions
-- Factory pattern: Use `createComponent` naming for component creators
-- Functional composition with pipe pattern
-- Follow BEM-style CSS naming: `mtrl-component__element--modifier`
-- Use TypeDoc-compatible comments for documentation
-- Use TypeScript with strict typing where possible
-- Error handling: Try/catch blocks for component creation
-- Import order: core modules first, then utility functions, local imports last
-- Components follow a standard structure in their directories (api.ts, config.ts, etc.)
-- Use ES6+ features with full browser compatibility
-
-## Test Conventions
-- Tests live in `test/components/` with `.test.ts` extension
-- Use JSDOM for DOM manipulation in tests
-- Create mock implementations to avoid circular dependencies
-- Test structure follows `describe/test` pattern
-- Test component creation, options, events, and state changes
-- Use `import type` to avoid circular dependencies in TypeScript tests
-- Test directory structure mirrors src directory structure

package/src/components/checkbox/constants.ts

@@ -1,37 +0,0 @@
-// src/components/checkbox/constants.ts
-
-/**
- * Visual variants for checkbox
- */
-export const CHECKBOX_VARIANTS = {
-  FILLED: 'filled',
-  OUTLINED: 'outlined'
-} as const;
-
-/**
- * Label position options
- */
-export const CHECKBOX_LABEL_POSITION = {
-  START: 'start',
-  END: 'end'
-} as const;
-
-/**
- * Checkbox state classes
- */
-export const CHECKBOX_STATES = {
-  CHECKED: 'checked',
-  INDETERMINATE: 'indeterminate',
-  DISABLED: 'disabled',
-  FOCUSED: 'focused'
-} as const;
-
-/**
- * Checkbox element classes
- */
-export const CHECKBOX_CLASSES = {
-  ROOT: 'checkbox',
-  INPUT: 'checkbox-input',
-  ICON: 'checkbox-icon',
-  LABEL: 'checkbox-label'
-} as const;