mtrl 0.2.5 → 0.2.6

package/src/components/tabs/_styles.scss

@@ -5,220 +5,350 @@
 @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;
+    }
+  }
+  
+  &--secondary {
+    min-height: 48px;
+    // Tab indicator styling
+    .#{$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
+  &-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
+  }
+}
+
+// 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;
-    
-    // Typography
-    @include m.typography('label-large');
-    font-weight: 500;
-    text-align: center;
-    color: t.color('on-surface-variant');
-    
-    // Transitions
-    @include m.motion-transition(
-      color,
-      background-color
-    );
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('primary');
+    outline-offset: 0;
+    z-index: 1;
+  }
+  
+  // Disabled state
+  &:disabled, &[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;
     
-    // Hover state
-    &:hover:not(:disabled) {
-      @include m.state-layer(t.color('on-surface'), 'hover');
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
     }
-    
-    // Active state
-    &:active:not(:disabled) {
-      @include m.state-layer(t.color('on-surface'), 'pressed');
+  }
+  
+  // 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;
     
-    // Selected state (active tab)
-    &--active {
-      color: t.color('primary');
+    .#{$component}--icon-only & {
+      @include m.visually-hidden;
     }
-    
-    // Focus state
-    &:focus-visible {
-      outline: 2px solid t.color('outline');
-      outline-offset: -2px;
-      z-index: 1;
+  }
+  
+  // 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 - Apply to both primary and secondary
+  &--active {
+    color: t.color('primary'); // MD3: Primary color
     
-    // Disabled state
-    &:disabled {
-      pointer-events: none;
-      color: t.alpha('on-surface', 0.38);
-      cursor: default;
+    .#{$component}-icon {
+      color: t.color('primary'); // MD3: Primary color
     }
     
-    // Tab content
-    &-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      width: 100%;
-      height: 100%;
+    // Hover state for active tabs
+    &:hover:not(:disabled):not([disabled]) {
+      background-color: t.alpha('primary', 0.08);
     }
     
-    // Tab icon
-    &-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 18px;
-      height: 18px;
+    // Pressed state for active tabs
+    &:active:not(:disabled):not([disabled]) {
+      background-color: t.alpha('primary', 0.12);
+    }
+  }
+  
+  // Secondary variant overrides
+  .#{$container}--secondary & {
+    &--active {
+      color: t.color('on-surface');
       
-      svg {
-        width: 18px;
-        height: 18px;
-        fill: currentColor;
+      .#{$component}-icon {
+        color: t.color('on-surface');
       }
     }
+  }
+  
+  // 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
+  .#{$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;
     
-    .#{$component}__list {
-      background-color: transparent;
+    &:disabled {
+      opacity: 0.38;
+      cursor: default;
     }
     
-    .#{$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);
-      }
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: t.color('on-surface');
     }
     
-    .#{$component}__indicator {
-      display: none;
+    &--left {
+      left: 4px;
     }
-  }
-  
-  // Neutral variant
-  &--neutral {
-    .#{$component}__tab {
-      color: t.color('on-surface-variant');
-      
-      &--active {
-        color: t.color('on-surface');
-      }
+    
+    &--right {
+      right: 4px;
     }
     
-    .#{$component}__indicator {
-      background-color: t.color('on-surface');
+    &:focus {
+      outline: none;
+    }
+    
+    &: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;
   }
 }