mtrl 0.2.6 → 0.2.7

package/src/components/slider/types.ts

@@ -1,9 +1,6 @@
 // src/components/slider/types.ts
 import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
 
-/**
- * Configuration interface for the Slider component
- */
 export interface SliderConfig {
   /** Minimum value of the slider */
   min?: number;
@@ -14,7 +11,7 @@ export interface SliderConfig {
   /** Current value of the slider */
   value?: number;
   
-  /** Secondary value for range slider (when using two thumbs) */
+  /** Secondary value for range slider (when using two handles) */
   secondValue?: number;
   
   /** Step size for discrete slider */
@@ -41,9 +38,21 @@ export interface SliderConfig {
   /** Whether to snap to steps while dragging (discrete slider) */
   snapToSteps?: boolean;
   
-  /** Whether the slider is a range slider (two thumbs) */
+  /** Whether the slider is a range slider (two handles) */
   range?: boolean;
   
+  /** Label text for the slider */
+  label?: string;
+  
+  /** Position of the label (start or end) - defaults to 'start' */
+  labelPosition?: 'start' | 'end';
+  
+  /** Icon to display with the slider */
+  icon?: string;
+  
+  /** Position of the icon (start or end) */
+  iconPosition?: 'start' | 'end';
+  
   /** Additional CSS classes */
   class?: string;
   
@@ -53,34 +62,28 @@ export interface SliderConfig {
   };
 }
 
-/**
- * Slider event object
- */
 export interface SliderEvent {
-  /** Slider component instance */
-  slider: SliderComponent;
+  /** The slider component that triggered the event */
+  slider: any;
   
   /** Current slider value */
   value: number;
   
-  /** Secondary slider value (for range slider) */
-  secondValue?: number;
+  /** Secondary value (for range sliders) */
+  secondValue: number | null;
   
-  /** Original event if applicable */
-  originalEvent?: Event;
+  /** Original DOM event if available */
+  originalEvent: Event | null;
   
-  /** Whether to prevent the default action */
+  /** Function to prevent default behavior */
   preventDefault: () => void;
   
-  /** Whether default action was prevented */
+  /** Whether default behavior was prevented */
   defaultPrevented: boolean;
 }
 
-/**
- * Slider component interface
- */
 export interface SliderComponent {
-  /** Slider element */
+  /** The root element of the slider */
   element: HTMLElement;
   
   /** Sets slider value */
@@ -95,16 +98,16 @@ export interface SliderComponent {
   /** Gets secondary slider value */
   getSecondValue: () => number | null;
   
-  /** Sets slider minimum */
+  /** Sets slider minimum value */
   setMin: (min: number) => SliderComponent;
   
-  /** Gets slider minimum */
+  /** Gets slider minimum value */
   getMin: () => number;
   
-  /** Sets slider maximum */
+  /** Sets slider maximum value */
   setMax: (max: number) => SliderComponent;
   
-  /** Gets slider maximum */
+  /** Gets slider maximum value */
   getMax: () => number;
   
   /** Sets slider step size */
@@ -140,6 +143,18 @@ export interface SliderComponent {
   /** Shows or hides current value while dragging */
   showCurrentValue: (show: boolean) => SliderComponent;
   
+  /** Sets label text */
+  setLabel: (text: string) => SliderComponent;
+  
+  /** Gets label text */
+  getLabel: () => string;
+  
+  /** Sets icon HTML */
+  setIcon: (iconHtml: string) => SliderComponent;
+  
+  /** Gets icon HTML */
+  getIcon: () => string;
+  
   /** Adds event listener */
   on: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
   

package/src/components/switch/_styles.scss

@@ -89,8 +89,6 @@ $component: '#{base.$prefix}-switch';
 
   // Label position variants
   &--label-start {
-    flex-direction: row-reverse;
-
     .#{$component}-label {
       margin-left: 0;
       margin-right: 12px;

package/src/components/tabs/_styles.scss

@@ -25,11 +25,18 @@ $container: '#{base.$prefix}-tabs';
     &:has(.#{$component}--icon-and-text) {
       min-height: 64px;
     }
+    
+    // Primary indicator specific styling
+    .#{$container}-indicator {
+      height: 4px;
+      border-radius: 3px 3px 0 0;
+      background-color: t.color('primary');
+    }
   }
   
   &--secondary {
     min-height: 48px;
-    // Tab indicator styling
+    // Tab indicator styling for secondary variant
     .#{$container}-indicator {
       height: 2px;
       border-radius: 0;
@@ -63,13 +70,10 @@ $container: '#{base.$prefix}-tabs';
     background-color: t.color('outline-variant'); // MD3: Outline variant color
   }
   
-  // Tab indicator styling
+  // Tab indicator styling - base styles
   &-indicator {
     position: absolute;
     bottom: 1px;
-    height: 4px;
-    background-color: t.color('primary');
-    border-radius: 3px 3px 0 0;
     transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                 width 250ms cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1; // Ensure indicator appears above divider
@@ -122,12 +126,12 @@ $container: '#{base.$prefix}-tabs';
   
   &:focus-visible {
     outline: 2px solid t.color('primary');
-    outline-offset: 0;
+    outline-offset: -2px;
     z-index: 1;
   }
   
   // Disabled state
-  &:disabled, &[disabled], &--disabled {
+  &--disabled, &:disabled {
     pointer-events: none;
     opacity: 0.38;
   }
@@ -189,44 +193,102 @@ $container: '#{base.$prefix}-tabs';
     }
   }
   
-  // Active Tab - Apply to both primary and secondary
-  &--active {
-    color: t.color('primary'); // MD3: Primary color
-    
-    .#{$component}-icon {
-      color: t.color('primary'); // MD3: Primary color
-    }
-    
-    // Hover state for active tabs
-    &:hover:not(:disabled):not([disabled]) {
-      background-color: t.alpha('primary', 0.08);
+  // ACTIVE TAB STATES - PRIMARY VARIANT
+  .#{$container}--primary & {
+    // Active Tab Base State - Apply to primary variant
+    &--active {
+      color: t.color('primary');
+      
+      .#{$component}-icon {
+        color: t.color('primary');
+      }
+      
+      // Hover state for active tabs
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('primary', 0.08);
+      }
+      
+      // Focused state for active tabs
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('primary', 0.1);
+        outline-color: t.color('primary');
+      }
+      
+      // Pressed state for active tabs
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('primary', 0.12);
+      }
     }
     
-    // Pressed state for active tabs
-    &:active:not(:disabled):not([disabled]) {
-      background-color: t.alpha('primary', 0.12);
+    // Inactive Tabs - Primary variant
+    &:not(.#{$component}--active):not(.#{$component}--disabled):not(:disabled) {
+      color: t.color('on-surface-variant');
+      
+      // Hover state for inactive tabs
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('on-surface-variant', 0.08);
+      }
+      
+      // Focused state for inactive tabs
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('on-surface-variant', 0.1);
+        outline-color: t.color('on-surface-variant');
+      }
+      
+      // Pressed state for inactive tabs
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('on-surface-variant', 0.12);
+      }
     }
   }
   
-  // Secondary variant overrides
+  // ACTIVE TAB STATES - SECONDARY VARIANT
   .#{$container}--secondary & {
+    // Active Tab - Secondary variant
     &--active {
       color: t.color('on-surface');
       
       .#{$component}-icon {
         color: t.color('on-surface');
       }
+      
+      // Hover state for active tabs - secondary
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('on-surface', 0.08);
+      }
+      
+      // Focused state for active tabs - secondary
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('on-surface', 0.1);
+        outline-color: t.color('on-surface');
+      }
+      
+      // Pressed state for active tabs - secondary
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('on-surface', 0.12);
+      }
+    }
+    
+    // Inactive Tabs - Secondary variant
+    &:not(.#{$component}--active):not(.#{$component}--disabled):not(:disabled) {
+      color: t.color('on-surface-variant');
+      
+      // Hover state for inactive tabs - secondary
+      &:hover, &.#{$component}--hover {
+        background-color: t.alpha('on-surface-variant', 0.08);
+      }
+      
+      // Focused state for inactive tabs - secondary
+      &:focus-visible, &.#{$component}--focus {
+        background-color: t.alpha('on-surface-variant', 0.1);
+        outline-color: t.color('on-surface-variant');
+      }
+      
+      // Pressed state for inactive tabs - secondary
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('on-surface-variant', 0.12);
+      }
     }
-  }
-  
-  // Hover state for inactive tabs
-  &:hover:not(:disabled):not(&--active):not([disabled]) {
-    background-color: t.alpha('on-surface-variant', 0.08);
-  }
-  
-  // Pressed state for inactive tabs
-  &:active:not(:disabled):not([disabled]):not(&--active) {
-    background-color: t.alpha('on-surface-variant', 0.12);
   }
   
   // Ripple effect styling

package/src/components/tabs/features.ts

@@ -282,12 +282,14 @@ export const withIndicator = <T extends IndicatorFeatureConfig>(config: T) =>
     const indicator: TabIndicator = createTabIndicator({
       prefix: config.prefix,
       // Support both new and legacy config
-      widthStrategy: indicatorConfig.widthStrategy || config.indicatorWidthStrategy || 'fixed',
+      widthStrategy: indicatorConfig.widthStrategy || config.indicatorWidthStrategy || 'auto', // Changed default to 'auto'
       height: indicatorConfig.height || config.indicatorHeight || 3,
       fixedWidth: indicatorConfig.fixedWidth || 40,
       animationDuration: indicatorConfig.animationDuration || 250,
       animationTiming: indicatorConfig.animationTiming || 'cubic-bezier(0.4, 0, 0.2, 1)',
-      color: indicatorConfig.color
+      color: indicatorConfig.color,
+      // Pass the tabs variant to the indicator
+      variant: config.variant || 'primary'
     });
     
     // Find the scroll container and add the indicator to it

package/src/components/tabs/indicator.ts

@@ -8,7 +8,7 @@ export interface TabIndicatorConfig {
   /** Height of the indicator in pixels */
   height?: number;
   /** Width strategy - fixed size or dynamic based on tab width */
-  widthStrategy?: 'fixed' | 'dynamic' | 'content';
+  widthStrategy?: 'fixed' | 'dynamic' | 'content' | 'auto';
   /** Fixed width in pixels when using fixed strategy */
   fixedWidth?: number;
   /** Animation duration in milliseconds */
@@ -21,6 +21,8 @@ export interface TabIndicatorConfig {
   prefix?: string;
   /** Custom color for the indicator */
   color?: string;
+  /** Tabs variant (primary or secondary) */
+  variant?: string;
 }
 
 /**
@@ -47,12 +49,13 @@ export interface TabIndicator {
  * Default configuration for tab indicator
  */
 const DEFAULT_CONFIG: TabIndicatorConfig = {
-  widthStrategy: 'fixed',
+  widthStrategy: 'auto', // Changed to 'auto' to match variant behavior
   fixedWidth: 40,
   animationDuration: 250,
   animationTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
   visible: true,
-  prefix: 'mtrl'
+  prefix: 'mtrl',
+  variant: 'primary'
 };
 
 /**
@@ -81,17 +84,38 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
   let currentTab: TabComponent | null = null;
   
   /**
-   * Calculates indicator width based on strategy
+   * Calculates indicator width based on strategy and variant
    * @param tab - Target tab
    * @returns Width in pixels
    */
   const calculateWidth = (tab: TabComponent): number => {
+    // Use auto strategy to determine based on variant
+    if (mergedConfig.widthStrategy === 'auto') {
+      // For secondary tabs, use full tab width
+      if (mergedConfig.variant === 'secondary') {
+        return tab.element.offsetWidth;
+      }
+      
+      // For primary tabs (default), use text label width
+      const textElement = tab.element.querySelector(`.${prefix}-tab-text`) || 
+                        tab.element.querySelector(`.${prefix}-button-text`);
+      
+      if (textElement) {
+        return textElement.clientWidth;
+      }
+      
+      // Fallback to dynamic if text element not found
+      return Math.max(tab.element.offsetWidth / 2, 30);
+    }
+    
+    // Handle other strategies when explicitly set
     switch (mergedConfig.widthStrategy) {
       case 'dynamic':
         return Math.max(tab.element.offsetWidth / 2, 30);
       case 'content':
         // Try to match content width
-        const text = tab.element.querySelector(`.${prefix}-button-text`);
+        const text = tab.element.querySelector(`.${prefix}-button-text`) || 
+                   tab.element.querySelector(`.${prefix}-tab-text`);
         if (text) {
           return Math.max(text.clientWidth, 30);
         }
@@ -126,6 +150,46 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
     };
   };
   
+  /**
+   * Calculates indicator position based on variant and width
+   * @param tab - Target tab
+   * @param indicatorWidth - Width of the indicator
+   * @returns {Object} Position information
+   */
+  const calculatePosition = (tab: TabComponent, indicatorWidth: number): { left: number } => {
+    const { left, width: tabWidth } = getTabPosition(tab.element);
+    
+    // For primary tabs with text label width, center under the text
+    if (mergedConfig.variant !== 'secondary' && 
+        (mergedConfig.widthStrategy === 'auto' || mergedConfig.widthStrategy === 'content')) {
+      const textElement = tab.element.querySelector(`.${prefix}-tab-text`) || 
+                        tab.element.querySelector(`.${prefix}-button-text`);
+      
+      if (textElement) {
+        // Get text element position relative to tab
+        const textRect = textElement.getBoundingClientRect();
+        const tabRect = tab.element.getBoundingClientRect();
+        const textLeft = textRect.left - tabRect.left;
+        
+        // Center indicator under text
+        return {
+          left: left + textLeft
+        };
+      }
+    }
+    
+    // For secondary tabs or when no text element found
+    // For centered indicators, center in the tab
+    if (indicatorWidth < tabWidth) {
+      return {
+        left: left + ((tabWidth - indicatorWidth) / 2)
+      };
+    }
+    
+    // For full-width indicators
+    return { left };
+  };
+  
   /**
    * Moves indicator to specified tab
    * @param tab - Target tab
@@ -140,15 +204,11 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
     // Store current tab for later updates
     currentTab = tab;
     
-    // Calculate indicator width
+    // Calculate indicator width based on strategy and variant
     const width = calculateWidth(tab);
     
-    // Get tab position directly from DOM
-    const { left, width: tabWidth } = getTabPosition(tab.element);
-    
-    // Calculate position to center indicator on tab
-    const tabCenter = left + (tabWidth / 2);
-    const indicatorLeft = tabCenter - (width / 2);
+    // Calculate position based on width and variant
+    const { left } = calculatePosition(tab, width);
     
     // Apply position immediately if requested
     if (immediate) {
@@ -160,7 +220,7 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
     
     // Update position and width
     element.style.width = `${width}px`;
-    element.style.transform = `translateX(${indicatorLeft}px)`;
+    element.style.transform = `translateX(${left}px)`;
     
     // Restore transition after immediate update
     if (immediate) {

package/src/components/tabs/types.ts

@@ -10,8 +10,14 @@ import { TabIndicator } from './indicator';
 export interface IndicatorConfig {
   /** Height of the indicator in pixels */
   height?: number;
-  /** Width strategy for the indicator */
-  widthStrategy?: 'fixed' | 'dynamic' | 'content';
+  /** 
+   * Width strategy for the indicator
+   * - 'fixed': Uses a fixed width defined by fixedWidth
+   * - 'dynamic': Uses half the tab width
+   * - 'content': Uses the text content width
+   * - 'auto': Adapts based on variant (primary: text width, secondary: full tab width)
+   */
+  widthStrategy?: 'fixed' | 'dynamic' | 'content' | 'auto';
   /** Fixed width in pixels (when using fixed strategy) */
   fixedWidth?: number;
   /** Animation duration in milliseconds */
@@ -20,6 +26,8 @@ export interface IndicatorConfig {
   animationTiming?: string;
   /** Custom color for the indicator */
   color?: string;
+  /** Tab variant (primary or secondary) */
+  variant?: string;
 }
 
 /**