mtrl 0.5.2 → 0.5.3

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

@@ -0,0 +1,309 @@
+// 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;
+  border: none;
+  background-color: t.color('primary-container');
+  color: t.color('on-primary-container');
+  font: inherit;
+  justify-content: center;
+  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(2);
+  
+  // Transitions for property changes (separated for performance)
+  @include m.motion-transition(
+    transform,
+    box-shadow,
+    background-color,
+    color
+  );
+  
+  // Extended FAB dimensions (56dp height, min-width 80dp)
+  height: 56px;
+  min-width: 80px;
+  padding: 0 16px 0 16px; // Left and right padding
+  border-radius: f.get-shape('large'); // 16px corners
+  
+  // Transition for dimension changes
+  transition: 
+    width 0.3s v.motion('easing-standard'),
+    min-width 0.3s v.motion('easing-standard'),
+    padding 0.3s v.motion('easing-standard');
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
+  }
+  
+  // Icon styles
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    padding: 2px;
+    transition: 
+      transform 0.3s v.motion('easing-standard'),
+      margin 0.3s v.motion('easing-standard');
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // Text styles
+  &-text {
+    @include m.typography('label-large');
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 280px;
+    margin: 0 6px 0 12px; 
+    transition: 
+      max-width 0.3s v.motion('easing-standard'),
+      opacity 0.2s v.motion('easing-standard'),
+      width 0.3s v.motion('easing-standard'),
+      margin 0.3s v.motion('easing-standard');
+  }
+  
+  // Width variants
+  &--fixed {
+    // Default behavior (width based on content)
+  }
+  
+  &--fluid {
+    width: 100%;
+  }
+  
+  // RTL support
+  html[dir="rtl"] & {
+    .#{$component}-icon {
+      margin-right: 0;
+      margin-left: 12px;
+    }
+  }
+  
+  // Color variants
+  &--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 {
+    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 {
+    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 {
+    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
+  &--collapsed {
+    width: 56px;
+    min-width: 56px;
+    
+    .#{$component}-icon {
+      margin: 0;
+      transform: scale(1.05);
+    }
+    
+    .#{$component}-text {
+      opacity: 0;
+      max-width: 0;
+      width: 0;
+      margin: 0;
+      transition: 
+        opacity 0.1s v.motion('easing-disappear'),
+        max-width 0.3s v.motion('easing-collapse') 0.05s,
+        width 0.3s v.motion('easing-collapse') 0.05s,
+        margin 0.3s v.motion('easing-collapse') 0.05s;
+    }
+  }
+  
+  &:not(.#{$component}--collapsed) {
+    // Ensure the icon scales smoothly
+    .#{$component}-icon {
+      transform: scale(1);
+    }
+    
+    .#{$component}-text {
+      transition: 
+        width 0.25s v.motion('easing-expand'),
+        max-width 0.25s v.motion('easing-expand'),
+        opacity 0.2s v.motion('easing-appear') 0.05s,
+        margin 0.25s v.motion('easing-expand');
+    }
+  }
+  
+  // Long-press state
+  &--long-press {
+    @include m.state-layer(t.color('on-primary-container'), 'dragged');
+    @include m.elevation(1);
+  }
+  
+  // Lowered state
+  &--lowered {
+    @include m.elevation(1);
+    transform: translateY(1px);
+  }
+  
+  // Disabled state
+  &--disabled,
+  &:disabled {
+    pointer-events: none;
+    @include m.elevation(0);
+    color: t.alpha('surface', 0.38);
+    background-color: t.alpha('surface', 0.12);
+  }
+  
+  // 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');
+  }
+  
+  // Animation effects
+  @keyframes extended-fab-enter {
+    from {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  &--animate-enter {
+    animation: extended-fab-enter 0.3s v.motion('emphasized-decelerate') forwards;
+  }
+  
+  // Mobile behaviors
+  @media (max-width: v.breakpoint('sm')) {
+    &--center-mobile {
+      left: 50%;
+      transform: translateX(-50%);
+      
+      &.#{$component}--lowered {
+        transform: translateX(-50%) translateY(1px);
+      }
+    }
+  }
+  
+  // Collapsible behavior
+  &--collapsible {
+    transition-duration: 0.3s;
+    transition-timing-function: v.motion('easing-standard');
+  }
+}
+
+
+// FIX: Disabled on dark theme (recommandations do not work as expected)
+body[data-theme-mode=dark] {
+    // Interactive states
+    .#{$component} {
+      &:disabled {
+        color: t.alpha('on-surface-dim', 0.38);
+        background-color: t.alpha('surface-dim', 0.12);
+
+        .#{$component}-text { 
+          opacity: 0.38;
+        }
+        .#{$component}-icon {
+          opacity: 0.38;
+          color: t.alpha('on-surface-dim', 0.12);
+        }
+      }
+    }
+  }

package/src/styles/components/_fab.scss

@@ -0,0 +1,244 @@
+// 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(2);
+  
+  // 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);
+    color: t.alpha('surface', 0.38);
+    background-color: t.alpha('surface', 0.12);
+  }
+  
+  // 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;
+  }
+}
+
+// FIX: Disabled on dark theme (recommandations do not work as expected)
+body[data-theme-mode=dark] {
+    // Interactive states
+    .#{$component} {
+      &:disabled {
+        color: t.alpha('on-surface-dim', 0.38);
+        background-color: t.alpha('surface-dim', 0.12);
+
+        .#{$component}-text { 
+          opacity: 0.38;
+        }
+        .#{$component}-icon {
+          opacity: 0.38;
+          color: t.alpha('on-surface-dim', 0.12);
+        }
+      }
+    }
+  }