mtrl 0.2.6 → 0.2.8

package/src/styles/components/_extended-fab.scss

@@ -0,0 +1,267 @@
+// src/components/extended-fab/_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}-extended-fab';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: t.color('primary-container');
+  color: t.color('on-primary-container');
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  overflow: hidden;
+  
+  // Extended FAB uses elevation in all variants
+  @include m.elevation(3);
+  
+  // Transitions for all property changes including collapse/expand
+  @include m.motion-transition(
+    transform,
+    box-shadow,
+    background-color,
+    color,
+    width,
+    border-radius,
+    padding
+  );
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
+  }
+  
+  // Extended FAB dimensions (56dp height, min-width 80dp)
+  height: 56px;
+  min-width: 80px;
+  padding: 0 16px;
+  border-radius: f.get-shape('large'); // 16px corners
+  
+  // Flexbox layout for icon and text
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  
+  // Text styles
+  &-text {
+    @include m.typography('label-large');
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  // Icon sizing and positioning
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // Width variants
+  &--fixed {
+    // Default behavior (width based on content)
+  }
+  
+  &--fluid {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  // RTL support for icon positioning
+  html[dir="rtl"] & {
+    .#{$component}-icon {
+      order: 1;
+    }
+    
+    .#{$component}-text {
+      order: 0;
+    }
+  }
+  
+  // Color variants - primary is the default
+  
+  // Primary variant (default)
+  &--primary {
+    background-color: t.color('primary-container');
+    color: t.color('on-primary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-primary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-primary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+
+  // Secondary variant
+  &--secondary {
+    background-color: t.color('secondary-container');
+    color: t.color('on-secondary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-secondary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Tertiary variant
+  &--tertiary {
+    background-color: t.color('tertiary-container');
+    color: t.color('on-tertiary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-tertiary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-tertiary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Surface variant
+  &--surface {
+    background-color: t.color('surface');
+    color: t.color('primary');
+    
+    &:hover {
+      @include m.state-layer(t.color('primary'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('primary'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Collapsed state (transforms into regular FAB)
+  &--collapsed {
+    width: 56px;
+    min-width: 56px;
+    border-radius: 50%;
+    padding: 0;
+
+    .#{$component}-text {
+      // Hide text but keep it accessible to screen readers
+
+      display: none;
+      opacity: 0;
+      width: 0;
+      overflow: hidden;
+    }
+    
+    .#{$component}-icon {
+      margin: 0;
+    }
+  }
+  
+  // Lowered state (when pressed)
+  &--lowered {
+    @include m.elevation(1);
+    transform: translateY(1px);
+  }
+  
+  // Disabled state
+  &--disabled,
+  &:disabled {
+    pointer-events: none;
+    @include m.elevation(0);
+    background-color: t.alpha('on-surface', 0.12);
+    color: t.alpha('on-surface', 0.38);
+  }
+  
+  // Positioning utilities
+  &--top-right {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--top-left {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-right {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-left {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  // Optional animations
+  @keyframes extended-fab-enter {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  &--animate-enter {
+    animation: extended-fab-enter 0.3s f.get-motion-easing('emphasized-decelerate') forwards;
+  }
+  
+  // Responsive behavior for different screen sizes
+  @media (max-width: v.breakpoint('sm')) {
+    // Center alignment option for mobile
+    &--center-mobile {
+      left: 50%;
+      transform: translateX(-50%);
+      
+      &.#{$component}--lowered {
+        transform: translateX(-50%) translateY(1px);
+      }
+    }
+  }
+  
+  // Collapsible behavior on scroll
+  &--collapsible {
+    transition-duration: 0.2s;
+  }
+}

package/src/styles/components/_fab.scss

@@ -0,0 +1,225 @@
+// src/components/fab/_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}-fab';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: t.color('primary-container');
+  color: t.color('on-primary-container');
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  overflow: hidden;
+  
+  // FAB uses elevation in all variants
+  @include m.elevation(3);
+  
+  // Transitions
+  @include m.motion-transition(
+    transform,
+    box-shadow,
+    background-color,
+    color
+  );
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
+  }
+  
+  // Default FAB size (56dp)
+  width: 56px;
+  height: 56px;
+  border-radius: f.get-shape('large');
+  
+  // Icon sizing
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // Size variants
+  &--small {
+    width: 40px;
+    height: 40px;
+    border-radius: f.get-shape('medium');
+    
+    .#{$component}-icon {
+      width: 24px;
+      height: 24px;
+      
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+  
+  &--default {
+    // Default is already defined in base styles
+  }
+  
+  &--large {
+    width: 96px;
+    height: 96px;
+    border-radius: f.get-shape('extra-large');
+    
+    .#{$component}-icon {
+      width: 36px;
+      height: 36px;
+      
+      svg {
+        width: 36px;
+        height: 36px;
+      }
+    }
+  }
+  
+  // Color variants - primary is the default
+
+  // Primary variant (default)
+  &--primary {
+    background-color: t.color('primary-container');
+    color: t.color('on-primary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-primary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-primary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+
+  // Secondary variant
+  &--secondary {
+    background-color: t.color('secondary-container');
+    color: t.color('on-secondary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-secondary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Tertiary variant
+  &--tertiary {
+    background-color: t.color('tertiary-container');
+    color: t.color('on-tertiary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-tertiary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-tertiary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Surface variant
+  &--surface {
+    background-color: t.color('surface');
+    color: t.color('primary');
+    
+    &:hover {
+      @include m.state-layer(t.color('primary'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('primary'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Lowered state (when pressed)
+  &--lowered {
+    @include m.elevation(1);
+    transform: translateY(1px);
+  }
+  
+  // Disabled state
+  &--disabled,
+  &:disabled {
+    pointer-events: none;
+    @include m.elevation(0);
+    background-color: t.alpha('on-surface', 0.12);
+    color: t.alpha('on-surface', 0.38);
+  }
+  
+  // Positioning utilities
+  &--top-right {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--top-left {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-right {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-left {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  // Optional animations
+  @keyframes fab-enter {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  &--animate-enter {
+    animation: fab-enter 0.3s f.get-motion-easing('emphasized-decelerate') forwards;
+  }
+}

package/src/{components/navigation/_styles.scss → styles/components/_navigation.scss}

@@ -249,6 +249,7 @@ $component: '#{base.$prefix}-nav';
     padding: 12px 0;
     transition: transform v.motion('duration-short2') v.motion('easing-standard');
     transform: translateX(0);
+    overflow-y: auto;
 
     // Hidden state
     &.#{$component}--hidden {