mithril-materialized 3.15.0 → 3.17.0

package/sass/components/_global.scss

@@ -7,6 +7,33 @@
 html {
  box-sizing: border-box;
 }
+
+/* Default themed scrollbar styling for all scroll containers */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.35))
+    var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  border: 2px solid var(--mm-scrollbar-track-color, transparent);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
+}
+
 *, *:before, *:after {
  box-sizing: inherit;
 }
@@ -735,6 +762,72 @@ td, th{
   Utility Classes
 *******************/
 
+.mm-layout-row {
+  display: flex;
+}
+
+.mm-layout-row--center {
+  align-items: center;
+}
+
+.mm-layout-row--align-end {
+  align-items: flex-end;
+}
+
+.mm-layout-row--wrap {
+  flex-wrap: wrap;
+}
+
+.mm-layout-row--justify-start {
+  justify-content: flex-start;
+}
+
+.mm-layout-row--justify-end {
+  justify-content: flex-end;
+}
+
+.mm-layout-row--justify-between {
+  justify-content: space-between;
+}
+
+.mm-layout-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mm-layout-gap, 0);
+}
+
+.mm-layout-cluster {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mm-layout-gap, 8px);
+}
+
+.mm-layout-grow {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mm-layout-ml-auto {
+  margin-left: auto;
+}
+
+.mm-layout-ml-8 {
+  margin-left: var(--mm-layout-inline-gap, 8px);
+}
+
+.mm-layout-mr-8 {
+  margin-right: var(--mm-layout-inline-gap, 8px);
+}
+
+.mm-layout-item-icon {
+  margin-right: var(--mm-layout-icon-gap, 32px);
+}
+
+.mm-layout-gap-sm {
+  gap: var(--mm-layout-gap-sm, 8px);
+}
+
 .hide {
   display: none !important;
 }

package/sass/components/_likert-scale.scss

@@ -101,6 +101,14 @@ $likert-tooltip-text: white !default;
   line-height: 1.3;
 }
 
+.likert-scale__item-anchor {
+  margin-left: 12px;
+  font-size: 0.875rem;
+  color: $likert-color-text-secondary;
+  line-height: 1.2;
+  text-align: left;
+}
+
 // Scale container (right side with fixed width)
 .likert-scale__scale-container {
   flex: 0 0 auto;
@@ -345,8 +353,13 @@ $likert-tooltip-text: white !default;
   .likert-scale__item {
     flex-direction: row;
     justify-content: flex-start;
+    align-items: center;
     padding: 4px 0;
     width: 100%;
+
+    &:hover:not(.likert-scale__item--disabled):not(.likert-scale__item--readonly) {
+      transform: none;
+    }
   }
 
   .likert-scale__number {
@@ -405,8 +418,13 @@ $likert-tooltip-text: white !default;
     .likert-scale__item {
       flex-direction: row;
       justify-content: flex-start;
+      align-items: center;
       padding: 4px 0;
       width: 100%;
+
+      &:hover:not(.likert-scale__item--disabled):not(.likert-scale__item--readonly) {
+        transform: none;
+      }
     }
 
     .likert-scale__number {
@@ -544,6 +562,12 @@ $likert-tooltip-text: white !default;
 
 // RTL support
 [dir="rtl"] {
+  .likert-scale__item-anchor {
+    margin-left: 0;
+    margin-right: 12px;
+    text-align: right;
+  }
+
   .likert-scale__tooltip {
     &::after {
       transform: translateX(50%);

package/sass/components/_sidenav.scss

@@ -120,18 +120,36 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   margin: 0;
   transform: translateX(-100%);
   height: 100%;
-  height: calc(100% + 60px);
-  height: -moz-calc(100%); //Temporary Firefox Fix
-  padding-bottom: 60px;
+  padding-bottom: 0;
   background-color: var(--mm-surface-color, variables.$sidenav-bg-color);
   z-index: 999;
   overflow-y: auto;
+  overflow-x: hidden;
   will-change: transform;
   backface-visibility: hidden;
   transform: translateX(-105%);
   transition: transform 0.3s ease, left 0.3s ease, right 0.3s ease;
   display: flex;
   flex-direction: column;
+  scrollbar-width: thin;
+  scrollbar-color: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3)) transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--mm-scrollbar-thumb-color, rgba(128, 128, 128, 0.3));
+    border-radius: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--mm-scrollbar-thumb-hover-color, rgba(128, 128, 128, 0.5));
+  }
 
   @extend .z-depth-1 !optional;
   

package/sass/components/_theme-variables.scss

@@ -6,6 +6,7 @@
   --mm-primary-color: #26a69a;
   --mm-primary-color-light: #80cbc4;
   --mm-primary-color-dark: #00695c;
+  --mm-range-value-text: #000000;
   
   --mm-secondary-color: #ff6f00;
   --mm-secondary-color-light: #ffa726;
@@ -21,6 +22,7 @@
   --mm-text-secondary: rgba(0, 0, 0, 0.6);
   --mm-text-disabled: rgba(0, 0, 0, 0.38);
   --mm-text-hint: rgba(0, 0, 0, 0.38);
+  --mm-error-color: #f44336;
   
   // Border and divider colors
   --mm-border-color: rgba(0, 0, 0, 0.12);
@@ -63,6 +65,11 @@
   --mm-shadow-umbra: rgba(0, 0, 0, 0.2);
   --mm-shadow-penumbra: rgba(0, 0, 0, 0.14);
   --mm-shadow-ambient: rgba(0, 0, 0, 0.12);
+
+  // Scrollbar colors
+  --mm-scrollbar-track-color: #f1f1f1;
+  --mm-scrollbar-thumb-color: rgba(0, 0, 0, 0.35);
+  --mm-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5);
   
   // Switch colors
   --mm-switch-checked-track: rgba(38, 166, 154, 0.3);
@@ -92,6 +99,7 @@ body {
   --mm-primary-color: #80cbc4;
   --mm-primary-color-light: #b2dfdb;
   --mm-primary-color-dark: #4db6ac;
+  --mm-range-value-text: #000000;
   
   --mm-secondary-color: #ffa726;
   --mm-secondary-color-light: #ffcc02;
@@ -107,6 +115,7 @@ body {
   --mm-text-secondary: rgba(255, 255, 255, 0.6);
   --mm-text-disabled: rgba(255, 255, 255, 0.38);
   --mm-text-hint: rgba(255, 255, 255, 0.38);
+  --mm-error-color: #ef5350;
   
   // Border and divider colors
   --mm-border-color: rgba(255, 255, 255, 0.12);
@@ -150,6 +159,11 @@ body {
   // Collection/Table hover (dark theme) - more subtle
   --mm-row-hover: rgba(255, 255, 255, 0.04);
   --mm-row-stripe: rgba(255, 255, 255, 0.02);
+
+  // Scrollbar colors (dark theme)
+  --mm-scrollbar-track-color: #1e1e1e;
+  --mm-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+  --mm-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.45);
   
   // Switch colors (dark theme)
   --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
@@ -169,6 +183,7 @@ body {
     --mm-primary-color: #80cbc4;
     --mm-primary-color-light: #b2dfdb;
     --mm-primary-color-dark: #4db6ac;
+    --mm-range-value-text: #000000;
     
     --mm-secondary-color: #ffa726;
     --mm-secondary-color-light: #ffcc02;
@@ -182,6 +197,7 @@ body {
     --mm-text-secondary: rgba(255, 255, 255, 0.6);
     --mm-text-disabled: rgba(255, 255, 255, 0.38);
     --mm-text-hint: rgba(255, 255, 255, 0.38);
+    --mm-error-color: #ef5350;
     
     --mm-border-color: rgba(255, 255, 255, 0.12);
     --mm-divider-color: rgba(255, 255, 255, 0.12);
@@ -217,5 +233,10 @@ body {
     
     // Table colors (auto dark theme)
     --mm-table-striped-color: rgba(255, 255, 255, 0.05);
+
+    // Scrollbar colors (auto dark theme)
+    --mm-scrollbar-track-color: #1e1e1e;
+    --mm-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
+    --mm-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.45);
   }
-}
+}

package/sass/components/_toggle-group.scss

@@ -5,6 +5,9 @@
   border: 1px solid var(--mm-border-color, #e0e0e0);
 
   .toggle-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     margin: 0;
     border-radius: 0;
     border-right: 1px solid var(--mm-border-color, #e0e0e0);

package/sass/components/forms/_form-groups.scss

@@ -8,7 +8,7 @@
   /* Create columns that are at least 150px wide and fill the available space */
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   /* Add space between grid items */
-  gap: 15px;
+  gap: var(--mm-layout-gap-form, 15px);
   padding-top: 10px;
   padding-bottom: 20px;
 }

package/sass/components/forms/_form-section.scss

@@ -0,0 +1,63 @@
+.mm-fieldset {
+  border: 1px solid var(--mm-border-color);
+  border-radius: 4px;
+  margin: 0 0 1.5rem;
+  padding: 1rem;
+}
+
+.mm-fieldset__legend {
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0 0.35rem;
+}
+
+.mm-fieldset__required,
+.mm-fieldset__error,
+.mm-validation-summary {
+  color: var(--mm-error-color);
+}
+
+.mm-fieldset__description,
+.mm-form-section__description {
+  color: var(--mm-text-secondary);
+  margin: 0 0 1rem;
+}
+
+.mm-fieldset__error {
+  margin: 0.75rem 0 0;
+}
+
+.mm-form-section {
+  margin-bottom: 2rem;
+}
+
+.mm-form-section__header {
+  margin-bottom: 1rem;
+}
+
+.mm-form-section__title {
+  font-size: 1.3rem;
+  margin: 0 0 0.4rem;
+}
+
+.mm-validation-summary {
+  background: color-mix(in srgb, var(--mm-error-color) 10%, transparent);
+  border-left: 4px solid var(--mm-error-color);
+  margin: 0 0 1.25rem;
+  padding: 0.8rem 1rem;
+}
+
+.mm-validation-summary__title {
+  font-weight: 600;
+  margin: 0 0 0.4rem;
+}
+
+.mm-validation-summary__list {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+.mm-validation-summary a {
+  color: inherit;
+  text-decoration: underline;
+}

package/sass/components/forms/_forms.scss

@@ -7,3 +7,4 @@
 @use "file-input";
 @use "range"; // Standard HTML5 range input styles
 @use "form-groups";
+@use "form-section";

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

@@ -137,6 +137,61 @@ textarea.materialize-textarea {
   }
 }
 
+// Number input controls
+.input-field {
+  input.number-input:not(.browser-default) {
+    -moz-appearance: textfield;
+    padding-right: 2rem;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  .number-input-controls {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: variables.$input-height;
+  }
+
+  .number-input-control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: 2px;
+    background: transparent;
+    color: var(--mm-button-flat-text, variables.$primary-color);
+    cursor: pointer;
+    line-height: 1;
+
+    &:hover {
+      background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--mm-primary-color, variables.$primary-color);
+      outline-offset: -2px;
+    }
+
+    svg {
+      font-size: 1.25rem;
+      line-height: 1;
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+}
+
 
 /* Validation Sass Placeholders */
 %valid-input-style {

package/sass/components/forms/_range-enhanced.scss

@@ -138,7 +138,7 @@
     .value-tooltip {
       position: absolute;
       background: var(--mm-primary-color, #26a69a);
-      color: white;
+      color: var(--mm-range-value-text, #000);
       padding: 4px 8px;
       border-radius: 4px;
       font-size: 12px;
@@ -320,7 +320,7 @@
     .value {
       position: absolute;
       background: var(--mm-primary-color, #26a69a);
-      color: white;
+      color: var(--mm-range-value-text, #000);
       padding: 2px 6px;
       border-radius: 4px;
       font-size: 12px;
@@ -403,4 +403,4 @@
   .double-range-slider {
     height: 100%;
   }
-}
+}

package/sass/components/forms/_select.scss

@@ -127,6 +127,72 @@ select:disabled {
   user-select: none;
 }
 
+// Outlined variant (opt-in via appearance='outlined')
+.input-field.select-space.select-appearance-outlined {
+  position: relative;
+
+  > i.prefix.material-icons {
+    position: absolute;
+    left: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    margin: 0;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  > i.prefix.material-icons + .select-wrapper {
+    padding-left: 54px;
+  }
+
+  > i.prefix ~ .select-wrapper {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .select-wrapper {
+    border: 1px solid var(--mm-input-border, #9e9e9e);
+    border-radius: 8px;
+    background-color: var(--mm-surface-color, transparent);
+    padding: 0 12px;
+    min-height: var(--mm-input-height, 3rem);
+    display: flex;
+    align-items: center;
+    overflow: visible;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &:focus-within {
+      border-color: var(--mm-primary-color, #2196f3);
+      box-shadow: 0 0 0 1px var(--mm-primary-color, #2196f3);
+    }
+
+    input.select-dropdown {
+      border-bottom: none;
+      margin: 0;
+      width: auto;
+      flex: 1 1 auto;
+      height: var(--mm-input-height, 3rem);
+      line-height: var(--mm-input-height, 3rem);
+      padding-right: 24px;
+    }
+
+    .select-inline-label {
+      color: var(--mm-text-hint, #9e9e9e);
+      font-size: variables.$input-font-size;
+      margin-right: 8px;
+      white-space: nowrap;
+      flex: 0 0 auto;
+      pointer-events: none;
+    }
+
+    .caret {
+      right: 10px;
+      z-index: 2;
+      pointer-events: none;
+    }
+  }
+}
+
 .select-wrapper i {
   color: var(--mm-text-primary, rgba(0,0,0,.87))
 }
@@ -270,6 +336,25 @@ body.keyboard-focused {
   }
 }
 
+// Async loading and error messages should align with other informational rows
+.search-select-loading-info,
+.search-select-error-info {
+  padding: 8px 16px;
+  color: var(--mm-text-hint, #9e9e9e);
+  font-style: italic;
+  text-align: center;
+  border-bottom: none;
+
+  &:hover {
+    background-color: transparent;
+    cursor: default;
+  }
+}
+
+.dropdown-content li.search-select-error-info {
+  color: var(--mm-error-color, #f44336) !important;
+}
+
 // Option labels for proper checkbox accessibility
 .search-select-option-label {
   display: flex;