mtrl 0.5.2 → 0.5.3

package/src/styles/components/_datepicker.scss

@@ -0,0 +1,358 @@
+// src/components/datepicker/_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}-datepicker';
+
+.#{$component} {
+  &-container {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 280px;
+    max-width: 360px;
+  }
+  
+  &-input {
+    display: flex;
+    height: 40px;
+    width: 100%;
+    padding: 0 12px;
+    border: 1px solid t.color('outline');
+    border-radius: 4px;
+    background-color: t.color('surface');
+    color: t.color('on-surface');
+    font-family: inherit;
+    font-size: 16px;
+    line-height: 24px;
+    transition: border-color 0.2s ease;
+    cursor: pointer;
+    
+    &:hover {
+      border-color: t.color('on-surface-variant');
+    }
+    
+    &:focus {
+      outline: none;
+      border-color: t.color('primary');
+      border-width: 2px;
+      padding: 0 11px; // Adjust for increased border width
+    }
+    
+    &:disabled {
+      opacity: 0.38;
+      cursor: not-allowed;
+      border-color: t.color('outline');
+      background-color: t.alpha('on-surface', 0.04);
+    }
+  }
+  
+  &-calendar {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    margin-top: 8px;
+    background-color: t.color('surface-container-high');
+    border-radius: v.shape('large');
+    box-shadow: v.elevation('level3');
+    overflow: hidden;
+    
+    &-content {
+      display: flex;
+      flex-direction: column;
+      padding: 16px;
+    }
+  }
+  
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+  
+  &-month-selector,
+  &-year-selector {
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    color: t.color('on-surface-variant');
+    @include m.typography('title-small');
+    cursor: pointer;
+    border-radius: v.shape('full');
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+  }
+  
+  &-nav-controls {
+    display: flex;
+    align-items: center;
+  }
+  
+  &-prev-btn,
+  &-next-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: none;
+    border-radius: 50%;
+    color: t.color('on-surface-variant');
+    cursor: pointer;
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  &-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 8px;
+  }
+  
+  &-weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    @include m.typography('body-small');
+    color: t.color('on-surface-variant');
+    font-weight: 500;
+  }
+  
+  &-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+  }
+  
+  &-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: none;
+    border-radius: 50%;
+    @include m.typography('body-medium');
+    color: t.color('on-surface');
+    cursor: pointer;
+    
+    // &:hover:not(:disabled) {
+    //   background-color: t.alpha('on-surface', 0.08);
+    // }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    &.outside-month {
+      color: t.color('on-surface-variant');
+      opacity: 0.6;
+    }
+    
+    &.today {
+      position: relative;
+      &::before {
+        position: absolute;
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+        content: '';
+        border: 1px solid t.color('primary');
+      }
+      
+    }
+    
+    &.selected {
+      background-color: t.color('primary');
+      color: t.color('on-primary');
+    }
+    
+    &:disabled {
+      color: t.color('on-surface-variant');
+      opacity: 0.38;
+      cursor: not-allowed;
+    }
+    
+    &.range-start,
+    &.range-end {
+      background-color: t.color('primary');
+      color: t.color('on-primary');
+    }
+    
+    &.range-middle {
+      background-color: t.alpha('primary-container', 0.18);
+      color: t.color('on-primary-container');
+      border-radius: 0;
+    }
+  }
+  
+  &-months,
+  &-years {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding: 16px 0;
+  }
+  
+  &-month,
+  &-year {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    border: none;
+    background: none;
+    border-radius: v.shape('medium');
+    @include m.typography('body-medium');
+    color: t.color('on-surface');
+    cursor: pointer;
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    &.selected {
+      background-color: t.color('primary');
+      color: t.color('on-primary');
+    }
+  }
+  
+  &-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 16px 8px 0;
+    margin-top: 16px;
+    
+    button {
+      margin-left: 8px;
+    }
+  }
+  
+  // Modal-specific styles
+  &-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: v.z-index('modal');
+    width: 328px;
+    max-width: 90vw;
+    
+    &-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: v.z-index('modal') - 1;
+    }
+  }
+  
+  // Full-screen modal for mobile
+  @media (max-width: 600px) {
+    &-modal {
+      width: 100%;
+      height: 100%;
+      max-width: none;
+      top: 0;
+      left: 0;
+      transform: none;
+      border-radius: 0;
+      
+      &-header {
+        height: 56px;
+        padding: 0 16px;
+        border-bottom: 1px solid t.color('outline-variant');
+      }
+    }
+  }
+  
+  // Range selection styles
+  &-range {
+    .#{$component}-days {
+      .#{$component}-day {
+        &.range-start {
+          position: relative;
+          // border-top-right-radius: 0;
+          // border-bottom-right-radius: 0;
+          &::before {
+            position: absolute;
+            content: '';
+            right: 0;
+            width: 50%;
+            height: 100%;
+            background-color: t.alpha('primary', 0.1);
+          }
+        }
+        
+        &.range-end {
+          position: relative;
+          // border-top-left-radius: 0;
+          // border-bottom-left-radius: 0;
+          &::before {
+            position: absolute;
+            content: '';
+            left: 0;
+            width: 50%;
+            height: 100%;
+            background-color: t.alpha('primary', 0.1);
+          }
+        }
+      }
+    }
+  }
+  
+  // Animation
+  &-animate {
+    .#{$component}-calendar {
+      animation: datepicker-fade-in 0.2s ease;
+    }
+  }
+}
+
+// Animations
+@keyframes datepicker-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/styles/components/_dialog.scss

@@ -0,0 +1,259 @@
+// src/components/dialog/_dialog.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}-dialog';
+
+// Dialog overlay (background scrim)
+.#{$component}-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: t.alpha('scrim', 0.48);
+  opacity: 0;
+  z-index: v.z-index('modal');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 24px;
+  box-sizing: border-box;
+  // Use proper SCSS function calls for transition values
+  $duration: v.motion('duration-short4');
+  $easing: v.motion('easing-standard');
+  transition: opacity #{$duration} #{$easing},
+              visibility #{$duration} #{$easing};
+  
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// Dialog container
+.#{$component} {
+  position: relative;
+  background-color: t.color('surface-container-high');
+  color: t.color('on-surface');
+  border-radius: v.shape('extra-large'); // 28dp corner radius
+  max-width: 560px;
+  min-width: 280px;
+  width: 100%;
+  margin: auto;
+  opacity: 0;
+  transform: scale(0.8);
+  $duration: v.motion('duration-short4');
+  $easing: v.motion('easing-standard');
+  transition: transform #{$duration} #{$easing},
+              opacity #{$duration} #{$easing};
+  @include m.elevation(3);
+  
+  &--visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+  
+  // Size variants
+  &--small {
+    width: 80%;
+    max-width: 360px;
+  }
+  
+  &--medium {
+    width: 90%;
+    max-width: 560px;
+  }
+  
+  &--large {
+    width: 95%;
+    max-width: 800px;
+  }
+  
+  &--fullwidth {
+    width: 100%;
+    max-width: none;
+    margin: 24px;
+  }
+  
+  &--fullscreen {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    border-radius: 0;
+  }
+  
+  // Animation variants
+  &--slide-up {
+    transform: translateY(50px);
+    
+    &.#{$component}--visible {
+      transform: translateY(0);
+    }
+  }
+  
+  &--slide-down {
+    transform: translateY(-50px);
+    
+    &.#{$component}--visible {
+      transform: translateY(0);
+    }
+  }
+  
+  &--fade {
+    transform: scale(1);
+    
+    &.#{$component}--visible {
+      transform: scale(1);
+    }
+  }
+}
+
+// Dialog header
+.#{$component}-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 24px 24px 16px 24px;
+  
+  &-content {
+    flex: 1;
+  }
+  
+  &-title {
+    margin: 0;
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 400;
+    color: t.color('on-surface');
+    @include m.typography('headline-small');
+  }
+  
+  &-subtitle {
+    margin: 4px 0 0 0;
+    @include m.typography('body-medium');
+    color: t.color('on-surface-variant');
+  }
+  
+  &-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    margin: -8px -8px 0 0;
+    padding: 8px;
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    color: t.color('on-surface-variant');
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
+    }
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+// Dialog content
+.#{$component}-content {
+  padding: 16px 24px;
+  color: t.color('on-surface');
+  @include m.typography('body-medium');
+  
+  p {
+    margin: 0 0 16px 0;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Dialog footer
+.#{$component}-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 24px;
+  gap: 8px;
+  
+  &--left {
+    justify-content: flex-start;
+  }
+  
+  &--center {
+    justify-content: center;
+  }
+  
+  &--space-between {
+    justify-content: space-between;
+  }
+}
+
+// Dialog divider styling
+.#{$component}-header-divider {
+  margin: 0;
+}
+
+.#{$component}-footer-divider {
+  margin: 0;
+}
+
+// Accessibility
+@include m.reduced-motion {
+  .#{$component},
+  .#{$component}-overlay {
+    transition: none;
+  }
+}
+
+// Mobile responsiveness
+@media (max-width: v.breakpoint('sm')) {
+  .#{$component} {
+    min-width: 280px;
+    width: calc(100% - 32px);
+    max-width: 100%;
+    margin: 16px;
+    
+    &--fullscreen {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  }
+  
+  .#{$component}-overlay {
+    padding: 16px;
+    align-items: flex-end;
+    
+    &.#{$component}--fullscreen {
+      padding: 0;
+    }
+  }
+  
+  // Adjust animations for mobile
+  .#{$component}--slide-up {
+    transform: translateY(100%);
+    
+    &.#{$component}--visible {
+      transform: translateY(0);
+    }
+  }
+}

package/src/styles/components/_divider.scss

@@ -0,0 +1,57 @@
+// src/components/divider/_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}-divider';
+
+.#{$component} {
+  // Base styles
+  display: block;
+  border: none;
+  margin: 0;
+  padding: 0;
+  background-color: t.color('outline-variant');
+  
+  // Orientation variants
+  &--horizontal {
+    width: 100%;
+    height: 1px;
+  }
+  
+  &--vertical {
+    height: 100%;
+    width: 1px;
+    display: inline-block;
+  }
+  
+  // Variant styles (these set the base for the variants, specific insets are handled via JS)
+  &--full-width {
+    width: 100%;
+  }
+  
+  &--inset {
+    // Base class for inset styles - specific margins are set via JS
+  }
+  
+  &--middle-inset {
+    // Base class for middle inset styles - specific margins are set via JS
+  }
+  
+  // Parent-child relationship context
+  .#{base.$prefix}-list & {
+    margin: 8px 0;
+  }
+  
+  .#{base.$prefix}-card & {
+    margin: 8px 0;
+  }
+  
+  // Dark theme support
+  :root[data-theme-mode="dark"] & {
+    // Dark theme color is handled through the CSS variable in theme
+  }
+}