mtrl 0.5.2 → 0.5.4

package/src/styles/components/_switch.scss

@@ -0,0 +1,305 @@
+// src/components/switch/_switch.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;
+
+$component: '#{base.$prefix}-switch';
+
+.#{$component} {
+  // Base styles
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  padding: 4px 0;
+  user-select: none;
+
+  // Container for switch and label
+  &-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 48px;
+    width: 100%;
+  }
+
+  // Content wrapper
+  &-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin-right: 12px;
+  }
+
+  // Label
+  &-label {
+    @include m.typography('title-medium');
+    font-size: 18px;
+    color: t.color('on-surface');
+  }
+
+  // Input (visually hidden but accessible)
+  &-input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
+    z-index: 1;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    // Focus indicator
+    &:focus-visible ~ .#{$component}-track {
+      outline: 2px solid t.color('primary');
+      outline-offset: 2px;
+    }
+  }
+
+  // Switch track (background bar)
+  &-track {
+    position: relative;
+    min-width: 52px;
+    height: 32px;
+    border-radius: 16px;
+    background-color: t.color('surface-container-highest');
+    border: 2px solid t.color('outline');
+    @include m.motion-transition(background-color, border-color, outline);
+    
+    // Ripple effect (consistent size for both hover and press)
+    &::after {
+      content: '';
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      top: -6px;
+      background-color: transparent;
+      opacity: 0;
+      border-radius: 50%;
+      z-index: 0;
+      transform: translateX(-6px);
+      transition: opacity v.motion('duration-medium1') v.motion('easing-emphasized'),
+                  background-color v.motion('duration-medium1') v.motion('easing-emphasized'),
+                  transform v.motion('duration-medium1') cubic-bezier(0.2, 1.4, 0.35, 1);
+      pointer-events: none;
+    }
+  }
+
+  // Switch thumb (slider)
+  &-thumb {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: t.color('outline');
+    transform: translateX(0);
+    transition: transform v.motion('duration-medium1') cubic-bezier(0.2, 1.4, 0.35, 1), 
+                background-color v.motion('duration-medium1') v.motion('easing-emphasized'),
+                width v.motion('duration-medium1') v.motion('easing-emphasized'),
+                height v.motion('duration-medium1') v.motion('easing-emphasized'),
+                top v.motion('duration-medium1') v.motion('easing-emphasized'),
+                left v.motion('duration-medium1') v.motion('easing-emphasized');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1; /* Ensure thumb is above ripple */
+    pointer-events: none;
+
+    // Icon inside thumb
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transform: scale(0);
+      transition: all v.motion('duration-short4') v.motion('easing-emphasized');
+      color: t.color('primary');
+      
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  // Supporting text
+  &-helper {
+    @include m.typography('body-medium');
+    color: t.color('on-surface-variant');
+    
+    &--error {
+      color: t.color('error');
+    }
+  }
+
+  // RTL support
+  @include m.rtl {
+    &-container {
+      flex-direction: row;
+    }
+    
+    &-content {
+      margin-left: 12px;
+      margin-right: 0;
+    }
+    
+    // Adjust thumb movement for RTL layout
+    &--checked .#{$component}-thumb {
+      transform: translateX(-20px);
+    }
+  }
+
+  // Checked state
+  &--checked {
+    .#{$component}-track {
+      background-color: t.color('primary');
+      border-color: t.color('primary');
+      
+      &::after {
+        transform: translateX(14px);
+      }
+    }
+
+    .#{$component}-thumb {
+      background-color: t.color('on-primary');
+      transform: translateX(20px);
+      width: 24px;
+      height: 24px;
+      top: 2px;
+      left: 2px;
+
+      &-icon {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &--dense {
+    .#{$component}-container {
+      min-height: initial;
+    }
+  }
+
+  // Error state
+  &--error {
+    .#{$component}-track {
+      border-color: t.color('error');
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    pointer-events: none;
+    .#{$component}-track {
+      opacity: 0.38;
+    }
+    
+    .#{$component}-label, .#{$component}-helper {
+      opacity: 0.38;
+    }
+    
+    // Specific styles for disabled + checked
+    &.#{$component}--checked {
+      .#{$component}-track {
+        background-color: t.color('outline');
+        border-color: t.color('outline');
+        opacity: 0.38;
+      }
+      
+      .#{$component}-thumb {
+        background-color: t.color('surface-dim');
+        &-icon {
+          color: t.color('on-surface');
+        }
+      }
+    }
+  }
+
+  // Interactive states for enabled switches
+  &:not(.#{$component}--disabled) {
+    // Remove track hover effects
+    .#{$component}-input:hover + .#{$component}-track::before,
+    .#{$component}-input:active + .#{$component}-track::before {
+      display: none;
+    }
+
+    // Handle hover and active states for both unchecked
+    &:not(.#{$component}--checked) {
+      .#{$component}-input:hover ~ .#{$component}-track,
+      .#{$component}-input:active ~ .#{$component}-track {
+        .#{$component}-thumb {
+          background-color: t.color('on-surface-variant');
+        }
+        
+        &::after {
+          background-color: t.color('on-surface');
+          opacity: v.state('hover-state-layer-opacity');
+          transform: translateX(-6px);
+        }
+      }
+      
+      .#{$component}-input:active ~ .#{$component}-track::after {
+        opacity: v.state('pressed-state-layer-opacity');
+      }
+    }
+    
+    // Hover/active states for checked
+    &.#{$component}--checked {
+      .#{$component}-input:hover ~ .#{$component}-track,
+      .#{$component}-input:active ~ .#{$component}-track {
+        &::after {
+          background-color: t.color('primary');
+          opacity: v.state('hover-state-layer-opacity');
+          transform: translateX(14px);
+        }
+      }
+      
+      .#{$component}-input:active ~ .#{$component}-track::after {
+        opacity: v.state('pressed-state-layer-opacity');
+      }
+    }
+
+    // Expand thumb on press for both checked and unchecked
+    .#{$component}-input:active ~ .#{$component}-track .#{$component}-thumb {
+      width: 28px;
+      height: 28px;
+      top: 0;
+      left: 0;
+    }
+    
+    &.#{$component}--checked .#{$component}-input:active ~ .#{$component}-track .#{$component}-thumb {
+      left: 0;
+    }
+  }
+
+  // Accessibility
+  @include m.reduced-motion {
+    .#{$component}-track,
+    .#{$component}-thumb,
+    .#{$component}-thumb-icon {
+      transition: none;
+    }
+  }
+
+  @include m.high-contrast {
+    .#{$component}-track {
+      border-width: 2px;
+    }
+    
+    &--checked .#{$component}-track {
+      border-color: currentColor;
+    }
+  }
+  
+  // Touch target for better mobile experience
+  // @include m.touch-target;
+}

package/src/styles/components/_tabs.scss

@@ -0,0 +1,421 @@
+// src/components/tabs/_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;
+
+$component: '#{base.$prefix}-button.#{base.$prefix}-tab';
+$container: '#{base.$prefix}-tabs';
+
+// 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;
+  
+  // 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;
+    
+    .#{$container}-scroll {
+      display: flex;
+      overflow-x: auto;
+      scrollbar-width: none; // Firefox
+      -ms-overflow-style: none; // IE and Edge
+      
+      &::-webkit-scrollbar {
+        display: none; // Chrome, Safari, and Opera
+      }
+    }
+  }
+  
+  // 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 5px 0 0;
+  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;
+  }
+  
+  &--icon-only {
+    height: 48px;
+  }
+  
+  &--icon-and-text {
+    height: 64px;
+    flex-direction: column;
+  }
+  
+  // Focus styles (3/7. Focused state)
+  &:focus {
+    outline: none;
+  }
+  
+  &: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;
+    
+    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;
+    line-height: 1.2;
+    
+    .#{$component}--icon-only & {
+      @include m.visually-hidden;
+    }
+  }
+  
+  // 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);
+        }
+      }
+    }
+  }
+  
+  // 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);
+        border-radius: 5px 5px 0 0;
+      }
+    }
+    
+    // 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);
+        border-radius: 5px 5px 0 0;
+      }
+    }
+  }
+  
+  // 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);
+        border-radius: 5px 5px 0 0;
+      }
+    }
+  }
+  
+  // Ripple effect styling
+  .#{$component}-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+    
+    .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;
+  
+  &[hidden] {
+    display: none;
+  }
+}
+
+// Scroll indicators
+.#{$container} {
+  &-scroll-indicator {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 24px;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    
+    &.visible {
+      opacity: 1;
+    }
+    
+    &--left {
+      left: 0;
+      background: linear-gradient(to right, t.color('surface'), transparent);
+    }
+    
+    &--right {
+      right: 0;
+      background: linear-gradient(to left, t.color('surface'), transparent);
+    }
+    
+    &--shadow {
+      &.#{$container}-scroll-indicator--left {
+        box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2);
+        background: none;
+      }
+      
+      &.#{$container}-scroll-indicator--right {
+        box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.2);
+        background: none;
+      }
+    }
+  }
+  
+  &-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;
+    }
+    
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: t.color('on-surface');
+    }
+    
+    &--left {
+      left: 4px;
+    }
+    
+    &--right {
+      right: 4px;
+    }
+    
+    &:focus {
+      outline: none;
+    }
+    
+    &:focus-visible {
+      outline: 2px solid t.color('primary');
+    }
+  }
+}
+
+// Responsive styles for small screens
+.#{$container}--responsive-small {
+  .#{$component} {
+    padding: 0 12px;
+    min-width: 72px;
+  }
+}