mtrl 0.3.8 → 0.4.0

package/src/styles/components/_datepicker.scss

@@ -1,358 +0,0 @@
-// 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

@@ -1,259 +0,0 @@
-// 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

@@ -1,57 +0,0 @@
-// 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
-  }
-}