mithril-materialized 2.0.0-beta.2 → 2.0.0-beta.4

package/sass/components/_wizard.scss

@@ -0,0 +1,416 @@
+// Wizard/Stepper Component Styles
+
+.wizard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  
+  &.horizontal {
+    .wizard-steps {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      position: relative;
+    }
+    
+    .wizard-step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      flex: 1;
+      position: relative;
+      
+      &:not(:last-child) {
+        margin-right: 2rem;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-top: 0.75rem;
+      max-width: 200px;
+    }
+    
+    .wizard-step-connector {
+      position: absolute;
+      top: 20px;
+      left: calc(50% + 20px);
+      width: calc(100% - 40px);
+      height: 2px;
+      background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+      z-index: 1;
+    }
+  }
+  
+  &.vertical {
+    .wizard-steps {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .wizard-step {
+      display: flex;
+      align-items: flex-start;
+      text-align: left;
+      position: relative;
+      padding-bottom: 2rem;
+      
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-left: 1rem;
+      flex: 1;
+    }
+    
+    .wizard-step-connector {
+      position: absolute;
+      top: 40px;
+      left: 19px;
+      bottom: -2rem;
+      width: 2px;
+      background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+      z-index: 1;
+    }
+  }
+}
+
+.wizard-header {
+  margin-bottom: 2rem;
+}
+
+.wizard-step {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  
+  &:hover:not(.disabled) {
+    .wizard-step-indicator {
+      box-shadow: 0 0 0 8px var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
+    }
+  }
+}
+
+.wizard-step-indicator {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 2;
+  
+  .material-icons {
+    font-size: 1.25rem;
+  }
+  
+  .wizard-step-number {
+    font-weight: 600;
+  }
+}
+
+.wizard-step.active {
+  .wizard-step-indicator {
+    background: var(--mm-primary-color, #26a69a);
+    color: var(--mm-button-text, #ffffff);
+  }
+  
+  .wizard-step-title {
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    font-weight: 600;
+  }
+}
+
+.wizard-step.completed {
+  .wizard-step-indicator {
+    background: var(--mm-primary-color, #26a69a);
+    color: var(--mm-button-text, #ffffff);
+  }
+  
+  .wizard-step-connector {
+    background: var(--mm-primary-color, #26a69a);
+  }
+}
+
+.wizard-step.error {
+  .wizard-step-indicator {
+    background: #f44336;
+    color: #ffffff;
+  }
+  
+  .wizard-step-title {
+    color: #f44336;
+  }
+}
+
+.wizard-step-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+  margin-bottom: 0.25rem;
+  line-height: 1.3;
+}
+
+.wizard-step-subtitle {
+  font-size: 0.75rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  line-height: 1.3;
+  margin-bottom: 0.25rem;
+}
+
+.wizard-step-optional {
+  font-size: 0.625rem;
+  color: var(--mm-text-hint, rgba(0, 0, 0, 0.38));
+  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wizard-body {
+  flex: 1;
+  margin-bottom: 2rem;
+  
+  // Ensure form elements have proper responsive layout
+  .input-field {
+    margin-bottom: 1.5rem;
+    
+    input, textarea {
+      width: 100%;
+      box-sizing: border-box;
+    }
+    
+    label {
+      color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
+      transition: all 0.3s ease;
+      
+      &.active {
+        color: var(--mm-primary-color, #26a69a);
+        transform: translateY(-14px) scale(0.8);
+      }
+    }
+  }
+  
+  .row {
+    margin-bottom: 0;
+    
+    .col {
+      padding: 0 0.75rem;
+      
+      &:first-child {
+        padding-left: 0;
+      }
+      
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+.wizard-step-panel {
+  animation: wizard-slide-in 0.3s ease;
+}
+
+@keyframes wizard-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.wizard-footer {
+  border-top: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.12));
+  padding-top: 1.5rem;
+}
+
+.wizard-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  
+  .wizard-btn-previous,
+  .wizard-btn-skip {
+    margin-right: auto;
+  }
+  
+  .wizard-btn-next,
+  .wizard-btn-complete {
+    margin-left: auto;
+    
+    .material-icons {
+      margin-right: 0.5rem;
+      animation: wizard-loading 1s infinite linear;
+    }
+  }
+}
+
+@keyframes wizard-loading {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Compact variant
+.wizard.compact {
+  .wizard-step-indicator {
+    width: 32px;
+    height: 32px;
+    font-size: 0.75rem;
+    
+    .material-icons {
+      font-size: 1rem;
+    }
+  }
+  
+  .wizard-step-title {
+    font-size: 0.75rem;
+  }
+  
+  .wizard-step-subtitle {
+    font-size: 0.625rem;
+  }
+  
+  .wizard-header {
+    margin-bottom: 1.5rem;
+  }
+  
+  &.horizontal {
+    .wizard-step-connector {
+      top: 16px;
+    }
+  }
+  
+  &.vertical {
+    .wizard-step-connector {
+      top: 32px;
+      left: 15px;
+    }
+  }
+}
+
+// Large variant
+.wizard.large {
+  .wizard-step-indicator {
+    width: 48px;
+    height: 48px;
+    font-size: 1rem;
+    
+    .material-icons {
+      font-size: 1.5rem;
+    }
+  }
+  
+  .wizard-step-title {
+    font-size: 1rem;
+  }
+  
+  .wizard-step-subtitle {
+    font-size: 0.875rem;
+  }
+  
+  .wizard-header {
+    margin-bottom: 2.5rem;
+  }
+  
+  &.horizontal {
+    .wizard-step-connector {
+      top: 24px;
+    }
+  }
+  
+  &.vertical {
+    .wizard-step-connector {
+      top: 48px;
+      left: 23px;
+    }
+  }
+}
+
+// Responsive behavior
+@media (max-width: 768px) {
+  .wizard.horizontal {
+    .wizard-steps {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    
+    .wizard-step {
+      flex-direction: row;
+      align-items: center;
+      text-align: left;
+      margin-right: 0;
+      margin-bottom: 1rem;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    
+    .wizard-step-content {
+      margin-top: 0;
+      margin-left: 1rem;
+      max-width: none;
+    }
+    
+    .wizard-step-connector {
+      display: none;
+    }
+  }
+}
+
+// Dark theme adjustments
+[data-theme="dark"] {
+  .wizard-step.error {
+    .wizard-step-title {
+      color: #f48fb1;
+    }
+    
+    .wizard-step-indicator {
+      background: #f48fb1;
+      color: #000000;
+    }
+  }
+  
+  .wizard-footer {
+    border-color: var(--mm-border-color, rgba(255, 255, 255, 0.12));
+  }
+}
+
+// Accessibility improvements
+.wizard-step {
+  &:focus {
+    outline: 2px solid var(--mm-primary-color, #26a69a);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+  
+  &[aria-disabled="true"] {
+    pointer-events: none;
+  }
+}
+
+.wizard-step-indicator {
+  &[aria-current="step"] {
+    box-shadow: 0 0 0 4px var(--mm-primary-color-light, rgba(38, 166, 154, 0.2));
+  }
+}

package/sass/components/forms/_input-fields.scss

@@ -8,7 +8,7 @@
 /* Style Placeholders */
 
 ::placeholder {
-  color: variables.$placeholder-text-color;
+  color: var(--mm-text-hint, variables.$placeholder-text-color);
 }
 
 /* Text inputs */
@@ -30,7 +30,7 @@ textarea.materialize-textarea {
   // General Styles
   background-color: transparent;
   border: none;
-  border-bottom: variables.$input-border;
+  border-bottom: 1px solid var(--mm-input-border, variables.$input-border);
   border-radius: 0;
   outline: none;
   height: variables.$input-height;
@@ -41,29 +41,30 @@ textarea.materialize-textarea {
   box-shadow: none;
   box-sizing: content-box;
   transition: box-shadow .3s, border .3s;
+  color: var(--mm-input-text, inherit);
 
   // Disabled input style
   &:disabled,
   &[readonly="readonly"] {
-    color: variables.$input-disabled-color;
-    border-bottom: variables.$input-disabled-border;
+    color: var(--mm-text-disabled, variables.$input-disabled-color);
+    border-bottom: 1px dotted var(--mm-input-border, variables.$input-disabled-border);
   }
 
   // Disabled label style
   &:disabled+label,
   &[readonly="readonly"]+label {
-    color: variables.$input-disabled-color;
+    color: var(--mm-text-disabled, variables.$input-disabled-color);
   }
 
   // Focused input style
   &:focus:not([readonly]) {
-    border-bottom: 1px solid variables.$input-focus-color;
-    box-shadow: 0 1px 0 0 variables.$input-focus-color;
+    border-bottom: 1px solid var(--mm-input-border-focus, variables.$input-focus-color);
+    box-shadow: 0 1px 0 0 var(--mm-input-border-focus, variables.$input-focus-color);
   }
 
   // Focused label style
   &:focus:not([readonly])+label {
-    color: variables.$input-focus-color;
+    color: var(--mm-input-border-focus, variables.$input-focus-color);
   }
 
   // Hide helper text on data message
@@ -113,6 +114,27 @@ textarea.materialize-textarea {
   & + label:after {
     @extend %input-after-style !optional;
   }
+
+  // Enhanced autofill prevention for all browsers including Edge
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px var(--mm-input-background, transparent) inset !important;
+    -webkit-text-fill-color: var(--mm-input-text, inherit) !important;
+    background-color: transparent !important;
+    color: var(--mm-input-text, inherit) !important;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  // Edge specific autofill styles
+  &:-ms-input-placeholder {
+    color: var(--mm-text-hint, variables.$placeholder-text-color) !important;
+  }
+  
+  &::-ms-input-placeholder {
+    color: var(--mm-text-hint, variables.$placeholder-text-color) !important;
+  }
 }
 
 
@@ -217,7 +239,7 @@ textarea.materialize-textarea {
     min-height: 18px;
     display: block;
     font-size: 12px;
-    color: rgba(0,0,0,.54);
+    color: var(--mm-text-secondary, rgba(0,0,0,.54));
   }
 
   // Prefix Icons
@@ -279,15 +301,15 @@ textarea.materialize-textarea {
   }
 
   &:focus:not(.browser-default) {
-    background-color: variables.$input-background;
+    background-color: var(--mm-input-background, variables.$input-background);
     border: 0;
     box-shadow: none;
-    color: #444;
+    color: var(--mm-input-text, #444);
 
     & + label i,
     & ~ .mdi-navigation-close,
     & ~ .material-icons {
-      color: #444;
+      color: var(--mm-input-text, #444);
     }
   }
 

package/sass/components/forms/_radio-buttons.scss

@@ -49,7 +49,7 @@
 
 [type="radio"]:not(:checked) + span:before,
 [type="radio"]:not(:checked) + span:after {
-  border: 2px solid variables.$radio-empty-color;
+  border: 2px solid var(--mm-text-secondary, variables.$radio-empty-color);
 }
 
 [type="radio"]:not(:checked) + span:after {
@@ -64,12 +64,12 @@
 [type="radio"]:checked + span:after,
 [type="radio"].with-gap:checked + span:before,
 [type="radio"].with-gap:checked + span:after {
-  border: variables.$radio-border;
+  border: 2px solid var(--mm-primary-color, variables.$radio-fill-color);
 }
 
 [type="radio"]:checked + span:after,
 [type="radio"].with-gap:checked + span:after {
-  background-color: variables.$radio-fill-color;
+  background-color: var(--mm-primary-color, variables.$radio-fill-color);
 }
 
 [type="radio"]:checked + span:after {
@@ -88,31 +88,31 @@
 
 /* Disabled Radio With gap */
 [type="radio"].with-gap:disabled:checked + span:before {
-  border: 2px solid variables.$input-disabled-color;
+  border: 2px solid var(--mm-text-disabled, variables.$input-disabled-color);
 }
 
 [type="radio"].with-gap:disabled:checked + span:after {
   border: none;
-  background-color: variables.$input-disabled-color;
+  background-color: var(--mm-text-disabled, variables.$input-disabled-color);
 }
 
 /* Disabled style */
 [type="radio"]:disabled:not(:checked) + span:before,
 [type="radio"]:disabled:checked + span:before {
   background-color: transparent;
-  border-color: variables.$input-disabled-color;
+  border-color: var(--mm-text-disabled, variables.$input-disabled-color);
 }
 
 [type="radio"]:disabled + span {
-  color: variables.$input-disabled-color;
+  color: var(--mm-text-disabled, variables.$input-disabled-color);
 }
 
 [type="radio"]:disabled:not(:checked) + span:before {
-  border-color: variables.$input-disabled-color;
+  border-color: var(--mm-text-disabled, variables.$input-disabled-color);
 }
 
 [type="radio"]:disabled:checked + span:after {
-  background-color: variables.$input-disabled-color;
-  border-color: variables.$input-disabled-solid-color;
+  background-color: var(--mm-text-disabled, variables.$input-disabled-color);
+  border-color: var(--mm-text-disabled, variables.$input-disabled-solid-color);
 }
 

package/sass/components/forms/_select.scss

@@ -86,7 +86,7 @@ select {
     bottom: 0;
     margin: auto 0;
     z-index: 0;
-    fill: rgba(0,0,0,.87);
+    fill: var(--mm-text-primary, rgba(0,0,0,.87));
   }
 
   & + label {
@@ -134,24 +134,24 @@ select:disabled {
 .select-dropdown li.disabled,
 .select-dropdown li.disabled > span,
 .select-dropdown li.optgroup {
-  color: variables.$select-disabled-color;
+  color: var(--mm-text-disabled, variables.$select-disabled-color);
   background-color: transparent;
 }
 
 body.keyboard-focused {
   .select-dropdown.dropdown-content li:focus {
-    background-color: variables.$select-option-focus;
+    background-color: var(--mm-dropdown-focus, variables.$select-option-focus);
   }
 }
 
 .select-dropdown.dropdown-content {
   li {
     &:hover {
-      background-color: variables.$select-option-hover;
+      background-color: var(--mm-dropdown-hover, variables.$select-option-hover);
     }
 
     &.selected {
-      background-color: variables.$select-option-selected;
+      background-color: var(--mm-dropdown-selected, variables.$select-option-selected);
     }
   }
 }
@@ -177,14 +177,14 @@ body.keyboard-focused {
 
 // Optgroup styles
 .select-dropdown li.optgroup {
-  border-top: 1px solid variables.$dropdown-hover-bg-color;
+  border-top: 1px solid var(--mm-border-color, variables.$dropdown-hover-bg-color);
 
   &.selected > span {
-    color: rgba(0, 0, 0, .7);
+    color: var(--mm-text-secondary, rgba(0, 0, 0, .7));
   }
 
   & > span {
-    color: rgba(0, 0, 0, .4);
+    color: var(--mm-text-hint, rgba(0, 0, 0, .4));
   }
 
   & ~ li.optgroup-option {

package/sass/components/forms/_switches.scss

@@ -20,14 +20,14 @@
   height: 0;
 
   &:checked + .lever {
-    background-color: variables.$switch-checked-lever-bg;
+    background-color: var(--mm-switch-checked-track, variables.$switch-checked-lever-bg);
 
     &:before, &:after {
       left: 18px;
     }
 
     &:after {
-      background-color: variables.$switch-bg-color;
+      background-color: var(--mm-switch-checked-thumb, variables.$switch-bg-color);
     }
   }
 }
@@ -38,7 +38,7 @@
   position: relative;
   width: 36px;
   height: 14px;
-  background-color: variables.$switch-unchecked-lever-bg;
+  background-color: var(--mm-switch-unchecked-track, variables.$switch-unchecked-lever-bg);
   border-radius: variables.$switch-radius;
   margin-right: 10px;
   transition: background 0.3s ease;
@@ -62,7 +62,7 @@
   }
 
   &:after {
-    background-color: variables.$switch-unchecked-bg;
+    background-color: var(--mm-switch-unchecked-thumb, variables.$switch-unchecked-bg);
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
   }
 }
@@ -83,10 +83,10 @@ input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
 // Disabled Styles
 .switch input[type=checkbox][disabled] + .lever {
   cursor: default;
-  background-color: rgba(0,0,0,.12);
+  background-color: var(--mm-switch-disabled-track, rgba(0,0,0,.12));
 }
 
 .switch label input[type=checkbox][disabled] + .lever:after,
 .switch label input[type=checkbox][disabled]:checked + .lever:after {
-  background-color: variables.$input-disabled-solid-color;
+  background-color: var(--mm-switch-disabled-thumb, variables.$input-disabled-solid-color);
 }

package/sass/materialize.scss

@@ -1,5 +1,8 @@
 @charset "UTF-8";
 
+// Theme Variables (must be first for CSS custom properties)
+@use "components/theme-variables";
+
 // Color
 @use "components/color-variables";
 @use "components/color-classes";
@@ -39,3 +42,7 @@
 @use "components/pulse";
 @use "components/datepicker";
 @use "components/timepicker";
+@use "components/theme-switcher";
+@use "components/file-upload";
+@use "components/breadcrumb";
+@use "components/wizard";