mithril-materialized 3.16.0 → 3.17.0

package/dist/index.css

@@ -2,6 +2,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;
   --mm-secondary-color-dark: #ef6c00;
@@ -12,6 +13,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;
   --mm-border-color: rgba(0, 0, 0, 0.12);
   --mm-divider-color: rgba(0, 0, 0, 0.12);
   --mm-input-background: #ffffff;
@@ -36,6 +38,9 @@
   --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);
+  --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);
   --mm-switch-checked-track: rgba(38, 166, 154, 0.3);
   --mm-switch-checked-thumb: #26a69a;
   --mm-switch-unchecked-track: rgba(0, 0, 0, 0.6);
@@ -59,6 +64,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;
   --mm-secondary-color-dark: #ff8f00;
@@ -69,6 +75,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);
   --mm-input-background: #2d2d2d;
@@ -94,6 +101,9 @@ body {
   --mm-dropdown-selected: #1e3a8a;
   --mm-row-hover: rgba(255, 255, 255, 0.04);
   --mm-row-stripe: rgba(255, 255, 255, 0.02);
+  --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);
   --mm-switch-checked-track: rgba(128, 203, 196, 0.3);
   --mm-switch-checked-thumb: #80cbc4;
   --mm-switch-unchecked-track: rgba(255, 255, 255, 0.6);
@@ -108,6 +118,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;
     --mm-secondary-color-dark: #ff8f00;
@@ -118,6 +129,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);
     --mm-input-background: #2d2d2d;
@@ -143,6 +155,9 @@ body {
     --mm-switch-disabled-track: rgba(255, 255, 255, 0.2);
     --mm-switch-disabled-thumb: #424242;
     --mm-table-striped-color: rgba(255, 255, 255, 0.05);
+    --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);
   }
 }
 .materialize-red {
@@ -2683,6 +2698,31 @@ 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;
 }
@@ -3175,7 +3215,7 @@ td, th {
 }
 .collection .collection-item.active {
   background-color: #26a69a;
-  color: rgb(234.25, 250.25, 248.75);
+  color: rgb(91.862745098%, 98.137254902%, 97.5490196078%);
 }
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
@@ -3304,6 +3344,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;
 }
@@ -4751,7 +4857,7 @@ small {
   text-transform: uppercase;
 }
 .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating):hover {
-  color: rgb(255, 215.8586387435, 166);
+  color: rgb(100%, 84.6504465661%, 65.0980392157%);
 }
 .card .card-reveal {
   padding: 24px;
@@ -4877,7 +4983,7 @@ small {
   text-transform: uppercase;
 }
 .tabs .tab a:focus, .tabs .tab a:focus.active {
-  background-color: rgba(246.0277777778, 178.4722222222, 181.1111111111, 0.2);
+  background-color: rgba(96.4814814815%, 69.9891067538%, 71.0239651416%, 0.2);
   outline: none;
 }
 .tabs .tab a:hover, .tabs .tab a.active {
@@ -4903,7 +5009,7 @@ small {
   position: absolute;
   bottom: 0;
   height: 2px;
-  background-color: rgb(246.0277777778, 178.4722222222, 181.1111111111);
+  background-color: rgb(96.4814814815%, 69.9891067538%, 71.0239651416%);
   will-change: left, right;
 }
 
@@ -5023,24 +5129,24 @@ small {
 
 .btn:focus, .btn-small:focus, .btn-large:focus,
 .btn-floating:focus {
-  background-color: rgb(28.5, 124.5, 115.5);
+  background-color: var(--mm-primary-color-dark, rgb(11.1764705882%, 48.8235294118%, 45.2941176471%));
 }
 
 .btn, .btn-small, .btn-large {
   text-decoration: none;
-  color: #fff;
-  background-color: #26a69a;
+  color: var(--mm-button-text, #fff);
+  background-color: var(--mm-primary-color, #26a69a);
   text-align: center;
   letter-spacing: 0.5px;
   transition: background-color 0.2s ease-out;
   cursor: pointer;
 }
 .btn:hover, .btn-small:hover, .btn-large:hover {
-  background-color: rgb(42.75, 186.75, 173.25);
+  background-color: var(--mm-primary-color-dark, rgb(16.7647058824%, 73.2352941176%, 67.9411764706%));
 }
 
 .btn-floating:hover {
-  background-color: #26a69a;
+  background-color: var(--mm-primary-color-dark, #26a69a);
 }
 .btn-floating:before {
   border-radius: 0;
@@ -5077,7 +5183,7 @@ small {
 }
 .btn-floating {
   display: inline-block;
-  color: #fff;
+  color: var(--mm-button-text, #fff);
   position: relative;
   overflow: hidden;
   z-index: 1;
@@ -5085,7 +5191,7 @@ small {
   height: 40px;
   line-height: 40px;
   padding: 0;
-  background-color: #26a69a;
+  background-color: var(--mm-primary-color, #26a69a);
   border-radius: 50%;
   transition: background-color 0.3s;
   cursor: pointer;
@@ -5095,7 +5201,7 @@ small {
   width: inherit;
   display: inline-block;
   text-align: center;
-  color: #fff;
+  color: var(--mm-button-text, #fff);
   font-size: 1.6rem;
   line-height: 40px;
 }
@@ -5213,7 +5319,7 @@ button.btn-floating {
   z-index: -1;
   width: 40px;
   height: 40px;
-  background-color: #26a69a;
+  background-color: var(--mm-primary-color, #26a69a);
   border-radius: 50%;
   transform: scale(0);
 }
@@ -5233,7 +5339,7 @@ button.btn-floating {
 }
 .btn-flat.disabled, .btn-flat.btn-flat[disabled] {
   background-color: transparent !important;
-  color: var(--mm-text-disabled, rgb(178.5, 178.5, 178.5)) !important;
+  color: var(--mm-text-disabled, rgb(70%, 70%, 70%)) !important;
   cursor: default;
 }
 
@@ -5333,7 +5439,7 @@ button.btn-floating {
 }
 
 body.keyboard-focused .dropdown-content li:focus {
-  background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
+  background-color: var(--mm-dropdown-focus, rgb(85.3333333333%, 85.3333333333%, 85.3333333333%));
 }
 
 .input-field.col .dropdown-content [type=checkbox] + label {
@@ -6052,6 +6158,51 @@ textarea.materialize-textarea::-ms-input-placeholder {
   color: var(--mm-text-hint, #d1d1d1) !important;
 }
 
+.input-field input.number-input:not(.browser-default) {
+  -moz-appearance: textfield;
+  padding-right: 2rem;
+}
+.input-field input.number-input:not(.browser-default)::-webkit-inner-spin-button, .input-field input.number-input:not(.browser-default)::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.input-field .number-input-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 3rem;
+}
+.input-field .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, #ee6e73);
+  cursor: pointer;
+  line-height: 1;
+}
+.input-field .number-input-control:hover {
+  background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
+}
+.input-field .number-input-control:focus-visible {
+  outline: 2px solid var(--mm-primary-color, #ee6e73);
+  outline-offset: -2px;
+}
+.input-field .number-input-control svg {
+  font-size: 1.25rem;
+  line-height: 1;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 /* Validation Sass Placeholders */
 .select-wrapper.valid > input.select-dropdown, input:not([type]):not(.browser-default).valid:not([readonly]):not([disabled]), input:not([type]):not(.browser-default):focus.valid:not([readonly]):not([disabled]),
 input[type=text]:not(.browser-default).valid:not([readonly]):not([disabled]),
@@ -6750,7 +6901,7 @@ textarea.materialize-textarea {
   height: 0;
 }
 .switch label input[type=checkbox]:checked + .lever {
-  background-color: var(--mm-switch-checked-track, rgb(132.0625, 199.4375, 193.12109375));
+  background-color: var(--mm-switch-checked-track, rgb(51.7892156863%, 78.2107843137%, 75.7337622549%));
 }
 .switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
   left: 18px;
@@ -6904,6 +7055,63 @@ select:disabled {
           user-select: none;
 }
 
+.input-field.select-space.select-appearance-outlined {
+  position: relative;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix.material-icons {
+  position: absolute;
+  left: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix.material-icons + .select-wrapper {
+  padding-left: 54px;
+}
+.input-field.select-space.select-appearance-outlined > i.prefix ~ .select-wrapper {
+  margin-left: 0;
+  width: 100%;
+}
+.input-field.select-space.select-appearance-outlined .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;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper:focus-within {
+  border-color: var(--mm-primary-color, #2196f3);
+  box-shadow: 0 0 0 1px var(--mm-primary-color, #2196f3);
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper 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;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper .select-inline-label {
+  color: var(--mm-text-hint, #9e9e9e);
+  font-size: 16px;
+  margin-right: 8px;
+  white-space: nowrap;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+.input-field.select-space.select-appearance-outlined .select-wrapper .caret {
+  right: 10px;
+  z-index: 2;
+  pointer-events: none;
+}
+
 .select-wrapper i {
   color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 }
@@ -7022,6 +7230,24 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   cursor: default;
 }
 
+.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;
+}
+.search-select-loading-info:hover,
+.search-select-error-info:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.dropdown-content li.search-select-error-info {
+  color: var(--mm-error-color, #f44336) !important;
+}
+
 .search-select-option-label {
   display: flex;
   align-items: center;
@@ -7294,7 +7520,7 @@ input[type=range]::-ms-thumb {
   /* 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;
 }
@@ -7313,6 +7539,70 @@ input[type=range]::-ms-thumb {
   text-align: initial;
 }
 
+.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;
+}
+
 /* Enhanced Range Sliders
    ========================================================================== */
 .range-slider.vertical {
@@ -7428,7 +7718,7 @@ input[type=range]::-ms-thumb {
 .single-range-slider .thumb .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;
@@ -7583,7 +7873,7 @@ input[type=range]::-ms-thumb {
 .double-range-slider .thumb .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;
@@ -12090,6 +12380,14 @@ body.dark {
   line-height: 1.3;
 }
 
+.likert-scale__item-anchor {
+  margin-left: 12px;
+  font-size: 0.875rem;
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  line-height: 1.2;
+  text-align: left;
+}
+
 .likert-scale__scale-container {
   flex: 0 0 auto;
   display: flex;
@@ -12291,9 +12589,13 @@ body.dark {
 .likert-scale--vertical .likert-scale__item {
   flex-direction: row;
   justify-content: flex-start;
+  align-items: center;
   padding: 4px 0;
   width: 100%;
 }
+.likert-scale--vertical .likert-scale__item:hover:not(.likert-scale__item--disabled):not(.likert-scale__item--readonly) {
+  transform: none;
+}
 .likert-scale--vertical .likert-scale__number {
   margin-bottom: 0;
   margin-right: 12px;
@@ -12339,9 +12641,13 @@ body.dark {
   .likert-scale--responsive .likert-scale__item {
     flex-direction: row;
     justify-content: flex-start;
+    align-items: center;
     padding: 4px 0;
     width: 100%;
   }
+  .likert-scale--responsive .likert-scale__item:hover:not(.likert-scale__item--disabled):not(.likert-scale__item--readonly) {
+    transform: none;
+  }
   .likert-scale--responsive .likert-scale__number {
     margin-bottom: 0;
     margin-right: 12px;
@@ -12447,6 +12753,11 @@ body.dark {
     min-height: 48px;
   }
 }
+[dir=rtl] .likert-scale__item-anchor {
+  margin-left: 0;
+  margin-right: 12px;
+  text-align: right;
+}
 [dir=rtl] .likert-scale__tooltip::after {
   transform: translateX(50%);
 }
@@ -12497,6 +12808,9 @@ body.dark {
   border: 1px solid var(--mm-border-color, #e0e0e0);
 }
 .toggle-group .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);
@@ -13003,6 +13317,13 @@ body.dark {
   flex-shrink: 0;
 }
 
+.badge-showcase {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mm-badge-showcase-gap, 20px);
+}
+
 .m-badge {
   position: absolute;
   display: flex;

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './carousel';
 export * from './chip';
 export * from './code-block';
 export * from './collapsible';
+export * from './combobox';
 export * from './collection';
 export * from './datepicker';
 export * from './datatable';
@@ -22,7 +23,6 @@ export * from './modal';
 export * from './option';
 export * from './pagination';
 export * from './parallax';
-export * from './datepicker';
 export * from './timepicker';
 export * from './pushpin';
 export * from './radio';
@@ -30,7 +30,6 @@ export * from './select';
 export * from './switch';
 export * from './tabs';
 export * from './search-select';
-export * from './timepicker';
 export { TimeRangePicker } from './time-range-picker';
 export type { TimeRangePickerAttrs } from './time-range-picker';
 export * from './digital-clock';
@@ -41,6 +40,7 @@ export * from './tooltip';
 export * from './utils';
 export * from './theme-switcher';
 export * from './file-upload';
+export * from './form-section';
 export * from './sidenav';
 export * from './breadcrumb';
 export * from './wizard';
@@ -51,6 +51,7 @@ export * from './image-list';
 export * from './rating';
 export * from './likert-scale';
 export * from './toggle-group';
+export * from './toggle-button';
 export * from './circular-progress';
 export * from './linear-progress';
 export * from './types';