mtrl 0.2.5 → 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

@@ -5,220 +5,412 @@
 @use '../../styles/abstract/mixins' as m;
 @use '../../styles/abstract/theme' as t;
 
-$component: '#{base.$prefix}-tabs';
+$component: '#{base.$prefix}-tab';
+$container: '#{base.$prefix}-tabs';
 
-.#{$component} {
-  // Base styles
+// Tabs Container Styles (1. Container)
+.#{$container} {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
+  background-color: t.color('surface'); // MD3: Surface color
   box-sizing: border-box;
   
-  // Tabs list container
-  &__list {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    position: relative;
+  // Basic container sizing
+  &--primary {
+    min-height: 48px;
+    
+    // Tab container with icons and text needs more space
+    &: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 for secondary variant
+    .#{$container}-indicator {
+      height: 2px;
+      border-radius: 0;
+      background-color: t.color('on-surface');
+    }
+  }
+  
+  // Scrollable container
+  &--scrollable {
+    overflow: hidden;
     
-    // Handle scrollable tabs
-    .#{$component}--scrollable & {
+    .#{$container}-scroll {
+      display: flex;
       overflow-x: auto;
       scrollbar-width: none; // Firefox
-      -ms-overflow-style: none; // IE/Edge
+      -ms-overflow-style: none; // IE and Edge
       
-      // Hide scrollbar in WebKit
       &::-webkit-scrollbar {
-        display: none;
+        display: none; // Chrome, Safari, and Opera
       }
     }
   }
   
-  // Individual tab
-  &__tab {
-    position: relative;
-    min-width: 90px;
-    max-width: 360px;
+  // Container divider (5. Divider)
+  &-divider {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: t.color('outline-variant'); // MD3: Outline variant color
+  }
+  
+  // Tab indicator styling - base styles
+  &-indicator {
+    position: absolute;
+    bottom: 1px;
+    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
+  }
+}
+
+// Individual Tab Styles
+.#{$component} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 90px;
+  max-width: 360px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 5px;
+  background-color: transparent;
+  color: t.color('on-surface-variant');
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  
+  // Typography for label text (4. Label)
+  @include m.typography('label-large');
+  
+  // Transition for state changes
+  transition:
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Container heights based on layout
+  &--text-only {
     height: 48px;
-    padding: 0 16px;
-    background: transparent;
-    border: none;
-    border-radius: 0;
-    cursor: pointer;
+  }
+  
+  &--icon-only {
+    height: 48px;
+  }
+  
+  &--icon-and-text {
+    height: 64px;
+    flex-direction: column;
+  }
+  
+  // Focus styles (3/7. Focused state)
+  &:focus {
     outline: none;
-    overflow: hidden;
-    flex-shrink: 0;
-    box-sizing: border-box;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('primary');
+    outline-offset: -2px;
+    z-index: 1;
+  }
+  
+  // Disabled state
+  &--disabled, &:disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+  
+  // Tab Icon (3. Icon - optional)
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
     
-    // Typography
-    @include m.typography('label-large');
-    font-weight: 500;
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+  }
+  
+  // Ensure proper vertical spacing for icon and text
+  &--icon-and-text {
+    .#{$component}-icon {
+      margin-bottom: 4px;
+    }
+  }
+  
+  // Tab Text (4. Label)
+  &-text {
+    @include m.truncate;
+    max-width: 100%;
     text-align: center;
-    color: t.color('on-surface-variant');
+    line-height: 1.2;
     
-    // Transitions
-    @include m.motion-transition(
-      color,
-      background-color
-    );
-    
-    // Hover state
-    &:hover:not(:disabled) {
-      @include m.state-layer(t.color('on-surface'), 'hover');
+    .#{$component}--icon-only & {
+      @include m.visually-hidden;
     }
-    
-    // Active state
-    &:active:not(:disabled) {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
+  }
+  
+  // Badge positioning (2. Badge - optional)
+  .#{base.$prefix}-badge-wrapper {
+    .#{base.$prefix}-badge {
+      // Position for different tab layouts
+      &--top-right {
+        .#{$component}--icon-only & {
+          top: 4px;
+          right: 4px;
+        }
+        
+        .#{$component}--text-only & {
+          top: 8px;
+          right: 8px;
+        }
+        
+        .#{$component}--icon-and-text & {
+          top: 4px;
+          right: calc(50% - 20px);
+        }
+      }
     }
-    
-    // Selected state (active tab)
+  }
+  
+  // 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);
+      }
     }
     
-    // Focus state
-    &:focus-visible {
-      outline: 2px solid t.color('outline');
-      outline-offset: -2px;
-      z-index: 1;
-    }
-    
-    // Disabled state
-    &:disabled {
-      pointer-events: none;
-      color: t.alpha('on-surface', 0.38);
-      cursor: default;
+    // 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);
+      }
     }
-    
-    // Tab content
-    &-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      width: 100%;
-      height: 100%;
+  }
+  
+  // 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);
+      }
     }
     
-    // Tab icon
-    &-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 18px;
-      height: 18px;
+    // 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');
+      }
       
-      svg {
-        width: 18px;
-        height: 18px;
-        fill: currentColor;
+      // Pressed state for inactive tabs - secondary
+      &:active, &.#{$component}--pressed {
+        background-color: t.alpha('on-surface-variant', 0.12);
       }
     }
+  }
+  
+  // Ripple effect styling
+  .#{$component}-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
     
-    // Tab label
-    &-label {
-      @include m.truncate;
+    .ripple {
+      position: absolute;
+      border-radius: 50%;
+      transform: scale(0);
+      pointer-events: none;
+      background-color: currentColor;
+      opacity: 0.1;
+      transform-origin: center;
     }
   }
+}
+
+// Tab panel styles
+.#{base.$prefix}-tab-panel {
+  padding: 16px;
   
-  // Active indicator
-  &__indicator {
+  &[hidden] {
+    display: none;
+  }
+}
+
+// Scroll indicators
+.#{$container} {
+  &-scroll-indicator {
     position: absolute;
+    top: 0;
     bottom: 0;
-    left: 0;
-    height: 2px;
-    background-color: t.color('primary');
-    transform-origin: left center;
+    width: 24px;
+    pointer-events: none;
     z-index: 1;
+    opacity: 0;
+    transition: opacity 0.2s ease;
     
-    .#{$component}--animated & {
-      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    &.visible {
+      opacity: 1;
     }
     
-    // Hide indicator if specified
-    .#{$component}--no-indicator & {
-      display: none;
-    }
-  }
-  
-  // Variants
-  
-  // Primary variant (default)
-  &--primary {
-    .#{$component}__tab {
-      color: t.color('on-surface-variant');
-      
-      &--active {
-        color: t.color('primary');
-      }
+    &--left {
+      left: 0;
+      background: linear-gradient(to right, t.color('surface'), transparent);
     }
     
-    .#{$component}__indicator {
-      background-color: t.color('primary');
+    &--right {
+      right: 0;
+      background: linear-gradient(to left, t.color('surface'), transparent);
     }
-  }
-  
-  // Secondary variant
-  &--secondary {
-    .#{$component}__tab {
-      color: t.color('on-surface-variant');
+    
+    &--shadow {
+      &.#{$container}-scroll-indicator--left {
+        box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2);
+        background: none;
+      }
       
-      &--active {
-        color: t.color('secondary');
+      &.#{$container}-scroll-indicator--right {
+        box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.2);
+        background: none;
       }
     }
-    
-    .#{$component}__indicator {
-      background-color: t.color('secondary');
-    }
   }
   
-  // Segmented variant (Material Design 3 segmented buttons style)
-  &--segmented {
-    background-color: t.color('surface-container-low');
-    border-radius: 16px;
-    padding: 4px;
+  &-scroll-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: t.color('surface-container-high');
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 2;
+    
+    &:disabled {
+      opacity: 0.38;
+      cursor: default;
+    }
     
-    .#{$component}__list {
-      background-color: transparent;
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: t.color('on-surface');
     }
     
-    .#{$component}__tab {
-      border-radius: 12px;
-      color: t.color('on-surface');
-      
-      &--active {
-        background-color: t.color('surface');
-        color: t.color('on-surface');
-        @include m.elevation(1);
-      }
+    &--left {
+      left: 4px;
     }
     
-    .#{$component}__indicator {
-      display: none;
+    &--right {
+      right: 4px;
     }
-  }
-  
-  // Neutral variant
-  &--neutral {
-    .#{$component}__tab {
-      color: t.color('on-surface-variant');
-      
-      &--active {
-        color: t.color('on-surface');
-      }
+    
+    &:focus {
+      outline: none;
     }
     
-    .#{$component}__indicator {
-      background-color: t.color('on-surface');
+    &:focus-visible {
+      outline: 2px solid t.color('primary');
     }
   }
-  
-  // Disabled state
-  &[aria-disabled="true"] {
-    pointer-events: none;
-    opacity: 0.38;
+}
+
+// Responsive styles for small screens
+.#{$container}--responsive-small {
+  .#{$component} {
+    padding: 0 12px;
+    min-width: 72px;
   }
 }