mtrl 0.3.8 → 0.4.0

package/src/styles/components/_radios.scss

@@ -1,187 +0,0 @@
-// src/components/radios/_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}-radios';
-
-.#{$component} {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  
-  // Vertical layout (default)
-  &--vertical {
-    flex-direction: column;
-    
-    .#{$component}-item {
-      margin-bottom: 12px;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  
-  // Horizontal layout
-  &--horizontal {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    
-    .#{$component}-item {
-      margin-right: 16px;
-      
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-  
-  // Disabled state
-  &--disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-  
-  // Radio item
-  &-item {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    
-    &--disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-      
-      .#{$component}-label {
-        cursor: not-allowed;
-      }
-    }
-  }
-  
-  // Radio input
-  &-input {
-    position: absolute;
-    opacity: 0;
-    height: 0;
-    width: 0;
-    margin: 0;
-    padding: 0;
-    
-    // Focus styles
-    &:focus ~ .#{$component}-label .#{$component}-ripple {
-      background-color: t.alpha('primary', 0.12);
-    }
-    
-    // Checked styles
-    &:checked ~ .#{$component}-label {
-      .#{$component}-circle {
-        border-color: t.color('primary');
-        border-width: 1.5px;
-        
-        &:after {
-          transform: translate(-50%, -50%) scale(1);
-          opacity: 1;
-        }
-      }
-    }
-    
-    // Disabled styles
-    &:disabled ~ .#{$component}-label {
-      .#{$component}-circle {
-        border-color: t.alpha('on-surface', 0.38);
-        
-        &:after {
-          background-color: t.alpha('on-surface', 0.38);
-        }
-      }
-      
-      .#{$component}-text {
-        color: t.alpha('on-surface', 0.38);
-      }
-    }
-  }
-  
-  // Radio label
-  &-label {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    padding: 8px 0;
-    height: 48px;
-    
-    // Typography for label
-    @include m.typography('body-medium');
-    
-    &--before {
-      flex-direction: row-reverse;
-      
-      .#{$component}-text {
-        margin-right: 12px;
-        margin-left: 0;
-      }
-    }
-  }
-  
-  // Radio control
-  &-control {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
-  }
-  
-  // Radio circle
-  &-circle {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    border: 1.5px solid t.color('outline');
-    border-radius: 50%;
-    box-sizing: border-box;
-    transition: border-color 0.2s ease;
-    
-    &:after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0);
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background-color: t.color('primary');
-      opacity: 0;
-      transition: transform 0.15s ease, opacity 0.15s ease;
-    }
-  }
-  
-  // Ripple effect
-  &-ripple {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 50%;
-    transition: background-color 0.15s ease;
-    
-    // Apply ripple effect on hover
-    .#{$component}-input:not(:disabled) ~ .#{$component}-label:hover & {
-      background-color: t.alpha('primary', 0.08);
-    }
-  }
-  
-  // Radio text
-  &-text {
-    margin-left: 8px;
-    line-height: 1.2;
-  }
-}

package/src/styles/components/_search.scss

@@ -1,306 +0,0 @@
-// src/components/search/_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}-search';
-
-.#{$component} {
-  // Base styles
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 720px;
-  min-width: 360px;
-  background-color: transparent;
-  transition: background-color 0.2s ease;
-  z-index: 1; 
-  
-  // Container
-  &-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 56px;
-    padding: 0 16px;
-    border-radius: v.shape('pill');
-    background-color: t.color('surface-container-high');
-    transition: background-color 0.2s ease;
-    overflow: hidden; 
-    
-    .#{$component}--disabled & {
-      opacity: 0.38;
-      pointer-events: none;
-    }
-  }
-  
-  // Leading Icon
-  &-leading-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 24px;
-    height: 24px;
-    margin-right: 16px;
-    color: t.color('on-surface');
-    cursor: pointer;
-    flex-shrink: 0;
-    
-    svg {
-      width: 24px;
-      height: 24px;
-    }
-    
-    &:focus {
-      outline: none;
-    }
-    
-    &:focus-visible {
-      outline: 2px solid t.color('outline');
-      border-radius: 50%;
-    }
-  }
-  
-  // Input wrapper
-  &-input-wrapper {
-    flex: 1;
-    min-width: 0;
-    height: 100%; 
-    display: flex;
-    align-items: center;
-  }
-  
-  // Input field
-  &-input {
-    width: 100%;
-    height: 100%; 
-    min-height: 36px; 
-    border: none;
-    background: transparent;
-    font-size: 16px;
-    color: t.color('on-surface');
-    padding: 8px 0; 
-    box-sizing: border-box;
-    outline: none;
-    
-    &::placeholder {
-      color: t.color('on-surface-variant');
-    }
-    
-    .#{$component}--disabled & {
-      cursor: not-allowed;
-    }
-  }
-  
-  // Clear button
-  &-clear-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 24px;
-    height: 24px;
-    margin-left: 16px;
-    color: t.color('on-surface-variant');
-    cursor: pointer;
-    flex-shrink: 0;
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.2s ease, visibility 0s;
-    
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-    
-    &--hidden {
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity 0.2s ease, visibility 0s 0.2s;
-    }
-    
-    &:focus {
-      outline: none;
-    }
-    
-    &:focus-visible {
-      outline: 2px solid t.color('outline');
-      border-radius: 50%;
-    }
-  }
-  
-  // Trailing icons
-  &-trailing-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 24px;
-    height: 24px;
-    margin-left: 16px;
-    color: t.color('on-surface-variant');
-    cursor: pointer;
-    flex-shrink: 0;
-    
-    svg {
-      width: 24px;
-      height: 24px;
-    }
-    
-    &:focus {
-      outline: none;
-    }
-    
-    &:focus-visible {
-      outline: 2px solid t.color('outline');
-      border-radius: 50%;
-    }
-  }
-  
-  // Avatar
-  &-avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 16px;
-    min-width: 30px;
-    height: 30px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    overflow: hidden;
-    
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-  
-  // Search variants
-  &--bar {
-    border-radius: v.shape('pill');
-    overflow: hidden;
-    transition: max-width 0.3s ease, width 0.3s ease;
-  }
-  
-  &--view {
-    border-radius: 0;
-    max-width: 100%;
-    width: 100%;
-    
-    .#{$component}-container {
-      border-radius: 0;
-    }
-    
-    // For docked view mode
-    @include m.breakpoint-up('md') {
-      border-radius: v.shape('extra-large');
-      
-      .#{$component}-container {
-        border-radius: v.shape('extra-large') v.shape('extra-large') 0 0;
-        height: 56px;
-      }
-    }
-  }
-  
-  // Divider
-  &-divider {
-    display: block;
-    width: 100%;
-    height: 1px;
-    background-color: t.color('outline');
-    opacity: 0.5;
-  }
-  
-  // Suggestions container
-  &-suggestions-container {
-    display: none;
-    background-color: t.color('surface-container-high');
-    max-height: 400px;
-    overflow-y: auto;
-    border-bottom-left-radius: v.shape('medium');
-    border-bottom-right-radius: v.shape('medium');
-    
-    &--visible {
-      display: block;
-    }
-    
-    // For docked view mode
-    @include m.breakpoint-up('md') {
-      border-radius: 0 0 v.shape('extra-large') v.shape('extra-large');
-    }
-  }
-  
-  // Suggestions list
-  &-suggestions-list {
-    list-style: none;
-    padding: 8px 0;
-    margin: 0;
-  }
-  
-  // Suggestion item
-  &-suggestion-item {
-    display: flex;
-    align-items: center;
-    padding: 12px 16px;
-    min-height: 48px; 
-    font-size: 16px;
-    color: t.color('on-surface');
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-    
-    &:hover, &:focus {
-      background-color: t.alpha('on-surface', 0.05);
-    }
-    
-    &:focus {
-      outline: none;
-    }
-    
-    // Highlight matched text
-    strong {
-      font-weight: 600;
-      color: t.color('on-surface');
-    }
-  }
-  
-  // Suggestion item icon
-  &-suggestion-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    margin-right: 16px;
-    color: t.color('on-surface-variant');
-    
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-  
-  // Suggestion item text
-  &-suggestion-text {
-    flex: 1;
-  }
-  
-  // Focus state
-  &--focused {
-    .#{$component}-container {
-      // No additional styles needed for focus in MD3
-    }
-  }
-  
-  // Full width
-  &--fullwidth {
-    max-width: 100%;
-  }
-  
-  // Expanded state (transitioning from bar to view)
-  &--expanded {
-    max-width: 100%;
-    width: 100%;
-  }
-}

package/src/styles/components/_segmented-button.scss

@@ -1,227 +0,0 @@
-// src/components/segmented-button/_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}-segmented-button';
-
-.#{$component} {
-  // Base styles
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 20px; // Half of height per MD3 specs
-  border: 1px solid t.color('outline');
-  background-color: transparent;
-  overflow: hidden;
-  
-  // Density variables with defaults (Material Design 3 standard density)
-  --segment-height: 40px;
-  --segment-padding-x: 24px;
-  --segment-padding-icon-only: 12px;
-  --segment-padding-icon-text-left: 16px;
-  --segment-padding-icon-text-right: 24px;
-  --segment-icon-size: 18px;
-  --segment-text-size: 0.875rem;
-  --segment-border-radius: 20px;
-  
-  // Set height from the CSS variable
-  height: var(--segment-height);
-  // Adjust border radius based on height
-  border-radius: calc(var(--segment-height) / 2);
-  
-  // Comfortable density (medium)
-  &--comfortable {
-    --segment-height: 36px;
-    --segment-padding-x: 20px;
-    --segment-padding-icon-only: 10px;
-    --segment-padding-icon-text-left: 14px;
-    --segment-padding-icon-text-right: 20px;
-    --segment-icon-size: 16px;
-    --segment-text-size: 0.8125rem;
-    --segment-border-radius: 18px;
-    
-    border-radius: var(--segment-border-radius);
-  }
-  
-  // Compact density (small)
-  &--compact {
-    --segment-height: 32px;
-    --segment-padding-x: 16px;
-    --segment-padding-icon-only: 8px;
-    --segment-padding-icon-text-left: 12px;
-    --segment-padding-icon-text-right: 16px;
-    --segment-icon-size: 16px;
-    --segment-text-size: 0.75rem;
-    --segment-border-radius: 16px;
-    
-    border-radius: var(--segment-border-radius);
-  }
-  
-  // Disabled state for whole component
-  &--disabled {
-    opacity: 0.38;
-    pointer-events: none;
-  }
-
-  // Style for button elements used as segments
-  .#{base.$prefix}-button {
-    // Reset button styles that we don't want
-    margin: 0;
-    box-shadow: none;
-    background-color: transparent;
-    border: none;
-    position: relative; // For pseudo-elements
-    border-radius: 0; // Reset any border-radius
-    min-width: 48px;
-    height: 100%;
-    color: t.color('on-surface'); // Original color
-    
-    // Use CSS variables for dynamic sizing based on density
-    padding: 0 var(--segment-padding-x);
-    
-    // Icon-only segments have equal padding all around
-    &.#{base.$prefix}-button--circular {
-      padding: 0 var(--segment-padding-icon-only);
-    }
-    
-    // Segments with both icon and text
-    &:has(.#{base.$prefix}-button-icon + .#{base.$prefix}-button-text) {
-      padding: 0 var(--segment-padding-icon-text-right) 0 var(--segment-padding-icon-text-left);
-    }
-    
-    // Only add border radius to first and last segments
-    &:first-child {
-      border-top-left-radius: var(--segment-border-radius);
-      border-bottom-left-radius: var(--segment-border-radius);
-    }
-    
-    &:last-child {
-      border-top-right-radius: var(--segment-border-radius);
-      border-bottom-right-radius: var(--segment-border-radius);
-    }
-    
-    // Hover state - keeping original color
-    &:hover:not([disabled]) {
-      background-color: t.alpha('on-surface', 0.08);
-    }
-    
-    // Focus state
-    &:focus {
-      outline: none;
-    }
-    
-    &:focus-visible {
-      outline: 2px solid t.color('outline');
-      outline-offset: -2px;
-    }
-    
-    // Replace border with pseudo-elements for better control
-    // Each segment has its own right border (except last)
-    &:not(:last-child)::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 100%;
-      width: 1px;
-      background-color: t.color('outline');
-      pointer-events: none;
-    }
-    
-    // Disabled state handling
-    &[disabled] {
-      opacity: 0.38;
-      
-      // When a disabled button has a right border, make it lower opacity
-      &::after {
-        background-color: t.alpha('outline', 0.38);
-      }
-      
-      // When a disabled button is before a non-disabled button, let the non-disabled handle the border
-      + .#{base.$prefix}-button:not([disabled])::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 1px;
-        background-color: t.color('outline');
-        pointer-events: none;
-      }
-      
-      // When a disabled button is after a non-disabled button, make the non-disabled button's border low opacity
-      &:not(:first-child) {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: 100%;
-          width: 1px;
-          background-color: t.alpha('outline', 0.38);
-          pointer-events: none;
-        }
-      }
-    }
-    
-    // Ensure all button styles are reset appropriately
-    &.#{base.$prefix}-button--filled,
-    &.#{base.$prefix}-button--outlined,
-    &.#{base.$prefix}-button--tonal,
-    &.#{base.$prefix}-button--elevated,
-    &.#{base.$prefix}-button--text {
-      background-color: transparent;
-      box-shadow: none;
-      color: t.color('on-surface');
-    }
-  }
-  
-  // Selected state
-  .#{base.$prefix}-segment--selected {
-    background-color: t.color('secondary-container');
-    color: t.color('on-secondary-container');
-    
-    &:hover:not([disabled]) {
-      background-color: t.alpha('secondary-container', 0.8);
-    }
-    
-    // Ensure color change even with different button variants
-    &.#{base.$prefix}-button--filled,
-    &.#{base.$prefix}-button--outlined,
-    &.#{base.$prefix}-button--tonal,
-    &.#{base.$prefix}-button--elevated,
-    &.#{base.$prefix}-button--text {
-      background-color: t.color('secondary-container');
-      color: t.color('on-secondary-container');
-    }
-  }
-  
-  // Ensure proper spacing in button contents
-  .#{base.$prefix}-button-text {
-    margin: 0;
-    white-space: nowrap;
-    @include m.typography('label-large');
-    // Apply density-specific font sizing
-    font-size: var(--segment-text-size);
-  }
-  
-  .#{base.$prefix}-button-icon + .#{base.$prefix}-button-text {
-    margin-left: 8px; // MD3 spec for space between icon and text
-  }
-  
-  // Icon sizing per MD3
-  .#{base.$prefix}-button-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    svg {
-      width: var(--segment-icon-size);
-      height: var(--segment-icon-size);
-    }
-  }
-}