mtrl 0.0.2 → 0.1.0

package/src/components/checkbox/styles.scss

@@ -1,8 +1,14 @@
-// src/components/checkbox/styles.scss
-@use 'sass:map';
-@use '../../styles/abstract/config' as c;
+// src/components/checkbox/_checkbox.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;
 
-.#{c.$prefix}-checkbox {
+$component: '#{base.$prefix}-checkbox';
+
+.#{$component} {
+  // Base styles
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -10,6 +16,7 @@
   padding: 4px 0;
   user-select: none;
 
+  // Input (visually hidden but accessible)
   &-input {
     position: absolute;
     opacity: 0;
@@ -23,22 +30,24 @@
       cursor: not-allowed;
     }
 
-    &:focus-visible ~ .#{c.$prefix}-checkbox-icon {
-      outline: 2px solid var(--mtrl-sys-color-primary);
+    // Focus indicator
+    &:focus-visible ~ .#{$component}-icon {
+      outline: 2px solid t.color('primary');
       outline-offset: 2px;
     }
   }
 
+  // Checkbox visual element
   &-icon {
     position: relative;
     width: 18px;
     height: 18px;
-    border-radius: 2px;
-    background-color: var(--mtrl-sys-color-surface-container-highest);
-    border: 2px solid var(--mtrl-sys-color-outline);
-    transition: background-color map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard'),
-                border-color map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-standard');
+    border-radius: f.get-shape('tiny');
+    background-color: t.color('surface-container-highest');
+    border: 2px solid t.color('outline');
+    @include m.motion-transition(background-color, border-color);
 
+    // Check mark icon
     svg {
       position: absolute;
       top: 50%;
@@ -47,22 +56,23 @@
       height: 18px;
       transform: translate(-50%, -50%) scale(0);
       fill: currentColor;
-      color: var(--mtrl-sys-color-on-primary);
-      transition: transform map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-emphasized');
+      color: t.color('on-primary');
+      transition: transform v.motion('duration-short4') v.motion('easing-emphasized');
     }
   }
 
+  // Label styling
   &-label {
-    @include c.typography('body-large');
+    @include m.typography('body-large');
     margin-left: 12px;
-    color: var(--mtrl-sys-color-on-surface);
+    color: t.color('on-surface');
   }
 
   // Label position variants
   &--label-start {
     flex-direction: row-reverse;
 
-    .#{c.$prefix}-checkbox-label {
+    .#{$component}-label {
       margin-left: 0;
       margin-right: 12px;
     }
@@ -71,42 +81,44 @@
   &--label-end {
     flex-direction: row;
 
-    .#{c.$prefix}-checkbox-label {
+    .#{$component}-label {
       margin-left: 12px;
       margin-right: 0;
     }
   }
 
-  @include c.rtl {
+  // RTL support
+  @include m.rtl {
     &--label-start {
-      .#{c.$prefix}-checkbox-label {
+      .#{$component}-label {
         margin-left: 12px;
         margin-right: 0;
       }
     }
 
     &--label-end {
-      .#{c.$prefix}-checkbox-label {
+      .#{$component}-label {
         margin-left: 0;
         margin-right: 12px;
       }
     }
   }
 
-  // States
-  .#{c.$prefix}-checkbox-input:checked ~ .#{c.$prefix}-checkbox-icon {
-    background-color: var(--mtrl-sys-color-primary);
-    border-color: var(--mtrl-sys-color-primary);
+  // Checked state
+  .#{$component}-input:checked ~ .#{$component}-icon {
+    background-color: t.color('primary');
+    border-color: t.color('primary');
 
     svg {
       transform: translate(-50%, -50%) scale(1);
     }
   }
 
+  // Indeterminate state
   &--indeterminate {
-    .#{c.$prefix}-checkbox-icon {
-      background-color: var(--mtrl-sys-color-primary);
-      border-color: var(--mtrl-sys-color-primary);
+    .#{$component}-icon {
+      background-color: t.color('primary');
+      border-color: t.color('primary');
 
       &::after {
         content: '';
@@ -116,7 +128,7 @@
         transform: translate(-50%, -50%);
         width: 10px;
         height: 2px;
-        background-color: var(--mtrl-sys-color-on-primary);
+        background-color: t.color('on-primary');
       }
 
       svg {
@@ -125,59 +137,97 @@
     }
   }
 
+  // Disabled state
   &--disabled {
-    opacity: .5;
+    opacity: 0.38;
+    
+    .#{$component}-input {
+      cursor: not-allowed;
+    }
   }
 
-  // Variants
+  // Outlined variant
   &--outlined {
-    .#{c.$prefix}-checkbox-icon {
+    .#{$component}-icon {
       background-color: transparent;
     }
 
-    .#{c.$prefix}-checkbox-input:checked ~ .#{c.$prefix}-checkbox-icon {
+    .#{$component}-input:checked ~ .#{$component}-icon {
       background-color: transparent;
-      border-color: var(--mtrl-sys-color-primary);
+      border-color: t.color('primary');
 
       svg {
-        color: var(--mtrl-sys-color-primary);
+        color: t.color('primary');
       }
     }
 
-    &.#{c.$prefix}-checkbox--indeterminate {
-      .#{c.$prefix}-checkbox-icon::after {
-        background-color: var(--mtrl-sys-color-primary);
+    &.#{$component}--indeterminate {
+      .#{$component}-icon::after {
+        background-color: t.color('primary');
       }
     }
   }
 
-  // Hover effects
+  // State layer effects
   &:not(&--disabled) {
-    .#{c.$prefix}-checkbox-input:hover ~ .#{c.$prefix}-checkbox-icon {
-      &::before {
-        content: '';
-        position: absolute;
-        top: -8px;
-        left: -8px;
-        right: -8px;
-        bottom: -8px;
-        background-color: var(--mtrl-sys-color-on-surface);
-        opacity: 0.08;
-        border-radius: 4px;
-      }
+    // Common state layer structure
+    .#{$component}-input:hover ~ .#{$component}-icon::before,
+    .#{$component}-input:active ~ .#{$component}-icon::before {
+      content: '';
+      position: absolute;
+      top: -12px;
+      left: -12px;
+      right: -12px;
+      bottom: -12px;
+      border-radius: 50%;
+      background-color: t.color('on-surface');
+    }
+    
+    // Hover state
+    .#{$component}-input:hover ~ .#{$component}-icon::before {
+      opacity: v.state('hover-state-layer-opacity');
+
+    }
+
+    // Hover checked state
+    .#{$component}-input:checked:hover ~ .#{$component}-icon::before {
+      opacity: v.state('pressed-state-layer-opacity');
+      background-color: t.color('primary');
+    }
+    // Active/pressed state
+    .#{$component}-input:active ~ .#{$component}-icon::before {
+      opacity: v.state('pressed-state-layer-opacity');
+      background-color: t.color('on-surface');
     }
   }
 
-  @include c.reduced-motion {
-    .#{c.$prefix}-checkbox-icon,
-    .#{c.$prefix}-checkbox-icon svg {
+  // Accessibility
+  @include m.reduced-motion {
+    .#{$component}-icon,
+    .#{$component}-icon svg {
       transition: none;
     }
   }
 
-  @include c.high-contrast {
-    .#{c.$prefix}-checkbox-icon {
+  @include m.high-contrast {
+    .#{$component}-icon {
       border-width: 2px;
     }
   }
+  
+  // Touch target
+  // @include m.touch-target;
+}
+
+// Checkbox group layout
+.#{$component}-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  
+  &--horizontal {
+    flex-direction: row;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
 }

package/src/components/container/styles.scss

@@ -1,59 +1,66 @@
-// src/components/container/styles.scss
-@use 'sass:map';
-@use '../../styles/abstract/config' as c;
-
-.#{c.$prefix}-container {
- @include c.shape('medium');
- @include c.motion-transition(
-   background-color,
-   box-shadow
- );
- 
- padding: 16px;
- background-color: var(--mtrl-sys-color-surface-container);
-
- &--low {
-   background-color: var(--mtrl-sys-color-surface-container-low);
- }
- 
- &--lowest {
-   background-color: var(--mtrl-sys-color-surface-container-lowest); 
- }
-
- &--high {
-   background-color: var(--mtrl-sys-color-surface-container-high);
- }
-
- &--highest {
-   background-color: var(--mtrl-sys-color-surface-container-highest);
- }
-
- // Elevation variants
- &--elevation-0 {
-   @include c.elevation(0);
- }
-
- &--elevation-1 {
-   @include c.elevation(1);
- }
-
- &--elevation-2 {
-   @include c.elevation(2);
- }
-
- &--elevation-3 {
-   @include c.elevation(3);
- }
-
- &--elevation-4 {
-   @include c.elevation(4);
- }
-
- @include c.reduced-motion {
-   transition: none;
- }
-
- @include c.high-contrast {
-   border: 1px solid currentColor;
- }
+// src/components/container/_container.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}-container';
+
+.#{$component} {
+  @include m.shape('medium');
+  @include m.motion-transition(
+    background-color,
+    box-shadow
+  );
+  
+  padding: 16px;
+  background-color: t.color('surface-container');
+
+  // Surface container variants
+  &--low {
+    background-color: t.color('surface-container-low');
+  }
+  
+  &--lowest {
+    background-color: t.color('surface-container-lowest'); 
+  }
+
+  &--high {
+    background-color: t.color('surface-container-high');
+  }
+
+  &--highest {
+    background-color: t.color('surface-container-highest');
+  }
+
+  // Elevation variants
+  &--elevation-0 {
+    @include m.elevation(0);
+  }
+
+  &--elevation-1 {
+    @include m.elevation(1);
+  }
+
+  &--elevation-2 {
+    @include m.elevation(2);
+  }
+
+  &--elevation-3 {
+    @include m.elevation(3);
+  }
+
+  &--elevation-4 {
+    @include m.elevation(4);
+  }
+  
+  // Accessibility
+  @include m.reduced-motion {
+    transition: none;
+  }
+
+  @include m.high-contrast {
+    border: 1px solid currentColor;
+  }
 }

package/src/components/list/styles.scss

@@ -1,19 +1,248 @@
-// src/components/list/styles.scss
-
-// Import core configuration and utilities
-@use '../../styles/abstract/config' as c;
+// src/components/list/_list.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/variables' as v;
-@use './styles/list';
-@use './styles/list-item';
+@use '../../styles/abstract/theme' as t;
+
+// Component variables
+$component: '#{base.$prefix}-list';
+$list-item-height: 48px !default;
+$list-item-dense-height: 40px !default;
+$list-padding: 8px !default;
+$list-item-padding: 16px !default;
+$list-section-padding: 16px !default;
 
 // Component-specific mixins
 @mixin list-item-hover {
-  @include c.state-layer(v.$list-hover-state-layer-color, 'hover');
+  @include m.state-layer(t.color('on-surface'), 'hover');
 }
 
 @mixin list-section-title {
-  @include c.typography('label-large');
-  color: v.$list-section-title-color;
-  padding: v.$list-section-padding v.$list-item-padding 8px;
+  @include m.typography('label-large');
+  color: t.color('primary');
+  padding: $list-section-padding $list-item-padding 8px;
+}
+
+// LIST COMPONENT
+.#{$component} {
+  display: flex;
+  flex-direction: column;
+  padding: $list-padding 0;
+  min-width: 200px;
+  background-color: t.color('surface');
+
+  // Sections
+  &-section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: $list-padding;
+    }
+  }
+
+  &-section-title {
+    @include list-section-title;
+  }
+
+  // Dividers
+  &-divider {
+    height: 1px;
+    margin: $list-padding 0;
+    background-color: t.color('outline-variant');
+  }
+
+  // Selection states
+  &[data-type="single"],
+  &[data-type="multi"],
+  &[data-type="radio"] {
+    .#{$component}-item {
+      cursor: pointer;
+
+      &--selected {
+        background-color: t.color('secondary-container');
+        color: t.color('on-secondary-container');
+
+        &:hover {
+          background-color: t.color('secondary-container');
+          @include m.state-layer(t.color('on-secondary-container'), 'hover');
+        }
+
+        .#{$component}-item-supporting {
+          color: t.color('on-secondary-container');
+        }
+      }
+    }
+  }
+
+  // Dense variant
+  &--dense {
+    .#{$component}-item {
+      min-height: $list-item-dense-height;
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  // RTL Support
+  @include m.rtl {
+    .#{$component}-section-title {
+      text-align: right;
+    }
+  }
+
+  // High contrast mode
+  @include m.high-contrast {
+    border: 1px solid currentColor;
+
+    &-divider {
+      border-top: 1px solid currentColor;
+      background: none;
+    }
+  }
+  
+  // LIST ITEM STYLES
+  &-item {
+    display: flex;
+    align-items: center;
+    min-height: $list-item-height;
+    padding: $list-padding $list-item-padding;
+    position: relative;
+    gap: 16px;
+    cursor: pointer;
+    color: t.color('on-surface');
+    @include m.motion-transition(background-color);
+
+    &:hover {
+      @include list-item-hover;
+    }
+
+    &:focus-visible {
+      @include m.state-layer(t.color('on-surface'), 'focus');
+      outline: none;
+    }
+
+    &:active {
+      @include m.state-layer(t.color('on-surface'), 'pressed');
+    }
+
+    // Content layout
+    &-content {
+      flex: 1;
+      min-width: 0; // Enable text truncation
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    // Text elements
+    &-text {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    &-overline {
+      @include m.typography('label-small');
+      color: t.color('on-surface-variant');
+    }
+
+    &-headline {
+      @include m.typography('body-large');
+      color: t.color('on-surface');
+    }
+
+    &-supporting {
+      @include m.typography('body-medium');
+      color: t.color('on-surface-variant');
+    }
+
+    &-meta {
+      @include m.typography('label-small');
+      color: t.color('on-surface-variant');
+      margin-top: 4px;
+    }
+
+    // Leading/trailing elements
+    &-leading,
+    &-trailing {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    &-leading {
+      width: 24px;
+      height: 24px;
+      color: t.color('on-surface-variant');
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-trailing {
+      color: t.color('on-surface-variant');
+    }
+
+    // Vertical layout variant
+    &.vertical {
+      min-height: 72px;
+      padding: 12px $list-item-padding;
+
+      .#{$component}-item {
+        &-content {
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        &-meta {
+          margin-top: $list-padding;
+        }
+      }
+    }
+
+    // States
+    &--selected {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
+
+      .#{$component}-item {
+        &-leading,
+        &-trailing {
+          color: t.color('on-secondary-container');
+        }
+      }
+    }
+
+    &--disabled {
+      opacity: 0.38;
+      pointer-events: none;
+    }
+
+    // RTL Support
+    @include m.rtl {
+      .#{$component}-item {
+        &-text {
+          text-align: right;
+        }
+      }
+    }
+
+    // High contrast mode
+    @include m.high-contrast {
+      &--selected {
+        outline: 2px solid currentColor;
+        outline-offset: -2px;
+      }
+    }
+  }
 }

package/src/components/menu/features/items-manager.js

@@ -331,6 +331,10 @@ export const withItemsManager = (config) => (component) => {
     removeItem (name) {
       if (!name) return this
 
+      // First, ensure we remove the item from our internal map
+      itemsMap.delete(name)
+
+      // Now try to remove the item from the DOM
       const item = list.querySelector(`[data-name="${name}"]`)
       if (item) {
         // Remove event listeners
@@ -344,8 +348,8 @@ export const withItemsManager = (config) => (component) => {
           submenus.delete(name)
         }
 
+        // Remove the item from the DOM
         item.remove()
-        itemsMap.delete(name)
       }
 
       return this