mithril-materialized 3.5.9 → 3.6.0

package/dist/collapsible.d.ts

@@ -10,6 +10,8 @@ export interface CollapsibleItem extends Attributes {
     iconName?: string;
 }
 export interface CollapsibleAttrs extends Attributes {
+    /** Optional header for the entire collapsible, similar to Collection header */
+    header?: string | Vnode<any, any>;
     /** The list of accordeon/collabsible items */
     items: CollapsibleItem[];
     /** If true, only one item can be expanded at a time (accordion mode) */

package/dist/components.css

@@ -43,7 +43,7 @@ a {
 }
 
 /* 2dp elevation modified*/
-.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn, .btn-floating, .btn-large, .btn-small {
+.z-depth-1, .sidenav, .dropdown-content, .btn, .btn-floating, .btn-large, .btn-small {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -1268,41 +1268,77 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 .collapsible {
-  border-top: 1px solid var(--mm-border-color, #ddd);
-  border-right: 1px solid var(--mm-border-color, #ddd);
-  border-left: 1px solid var(--mm-border-color, #ddd);
+  border: 1px solid var(--mm-border-color, #e0e0e0);
+  background-color: var(--mm-surface-color, #fff);
   margin: 0.5rem 0 1rem 0;
+  overflow: hidden;
+}
+.collapsible li {
+  list-style-type: none;
 }
 
-.collapsible-header:focus {
-  outline: 0;
+.collapsible-main-header {
+  background-color: var(--mm-surface-color, #fff);
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
+  padding: 10px 20px;
 }
+
 .collapsible-header {
   display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 3rem;
+  line-height: 1.5rem;
+  padding: 1rem;
+  background-color: var(--mm-surface-color, #fff);
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  line-height: 1.5;
-  padding: 1rem;
-  border-bottom: 1px solid var(--mm-border-color, #ddd);
+  transition: background-color 0.25s;
+}
+.collapsible-header:hover {
+  background-color: var(--mm-row-hover, #ddd);
+}
+.collapsible-header:focus {
+  outline: 0;
 }
-.collapsible-header i {
+.collapsible-header i.material-icons {
   width: 2rem;
   font-size: 1.6rem;
-  display: inline-block;
-  text-align: center;
+  line-height: 1.5rem;
+  display: block;
+  flex-shrink: 0;
   margin-right: 1rem;
 }
+.collapsible-header .collapsible-header-text,
+.collapsible-header .collapsible-header-content {
+  flex: 1;
+  align-items: center;
+  gap: 1rem;
+}
 
 .keyboard-focused .collapsible-header:focus {
-  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  background-color: var(--mm-row-hover, #ddd);
 }
 
 .collapsible-body {
   display: none;
-  border-bottom: 1px solid var(--mm-border-color, #ddd);
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
+  background-color: var(--mm-surface-color, #fff);
   box-sizing: border-box;
   padding: 2rem;
 }
+li:last-child .collapsible-body {
+  border-bottom: none;
+}
+
+li.active .collapsible-body {
+  display: block;
+}
+
+.collapsible.with-header .collapsible-main-header:first-child {
+  border-top: none;
+}
 
 .sidenav .collapsible,
 .sidenav.sidenav-fixed .collapsible {
@@ -1368,29 +1404,38 @@ body.keyboard-focused .dropdown-content li:focus {
   cursor: zoom-out;
 }
 
-#materialbox-overlay {
+.materialbox-overlay {
   position: fixed;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
-  background-color: #292929;
+  background-color: rgba(0, 0, 0, 0.85);
   z-index: 1000;
+  opacity: 0;
+  cursor: zoom-out;
   will-change: opacity;
 }
 
+.materialbox-image {
+  position: fixed;
+  cursor: zoom-out;
+  max-width: none;
+  z-index: 1001;
+  will-change: top, left, width, height;
+}
+
 .materialbox-caption {
   position: fixed;
-  display: none;
-  color: #fff;
-  line-height: 50px;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-size: 16px;
   text-align: center;
-  padding: 0% 15%;
-  height: 50px;
-  z-index: 1000;
+  opacity: 0;
+  z-index: 1002;
+  pointer-events: none;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -2552,7 +2597,7 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   transition: background-color 0.2s ease;
 }
 .datatable thead th.sortable:hover {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable thead th.sortable .sort-indicators {
   position: absolute;
@@ -2594,22 +2639,22 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   cursor: pointer;
 }
 .datatable tbody tr:hover {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable tbody tr:hover td {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable.striped tbody tr:nth-child(odd) {
-  background-color: var(--mm-dropdown-focus);
+  background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
 }
 .datatable.striped tbody tr:nth-child(odd) td {
-  background-color: var(--mm-dropdown-focus);
+  background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
 }
 .datatable.striped tbody tr:nth-child(odd):hover {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable.striped tbody tr:nth-child(odd):hover td {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable .selection-checkbox {
   width: 40px;
@@ -2758,18 +2803,6 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   }
 }
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) .datatable-container .datatable thead th.sortable:hover,
-  [data-theme=dark] .datatable-container .datatable thead th.sortable:hover {
-    background-color: var(--mm-dropdown-hover);
-  }
-  :root:not([data-theme]) .datatable-container .datatable tbody tr:hover,
-  [data-theme=dark] .datatable-container .datatable tbody tr:hover {
-    background-color: var(--mm-dropdown-hover);
-  }
-  :root:not([data-theme]) .datatable-container .datatable.striped tbody tr:nth-child(odd),
-  [data-theme=dark] .datatable-container .datatable.striped tbody tr:nth-child(odd) {
-    background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
-  }
   :root:not([data-theme]) .datatable-container .datatable.fixed-header thead th,
   [data-theme=dark] .datatable-container .datatable.fixed-header thead th {
     border-bottom: 1px solid var(--mm-border-color);
@@ -3107,6 +3140,7 @@ body.dark {
   --mm-dropdown-hover: #eee;
   --mm-dropdown-focus: #ddd;
   --mm-dropdown-selected: #e3f2fd;
+  --mm-row-hover: rgba(0, 0, 0, 0.04);
   --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);
@@ -3166,6 +3200,8 @@ body {
   --mm-dropdown-hover: #444;
   --mm-dropdown-focus: #555;
   --mm-dropdown-selected: #1e3a8a;
+  --mm-row-hover: rgba(255, 255, 255, 0.04);
+  --mm-row-stripe: rgba(255, 255, 255, 0.02);
   --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);

package/dist/core.css

@@ -2643,12 +2643,14 @@ textarea {
   background-color: transparent;
 }
 textarea.materialize-textarea {
+  padding-top: 10px;
+  padding-bottom: 0;
+  height: 35px;
+  margin-bottom: 2.5px;
   line-height: 1.5;
   overflow-y: hidden; /* prevents scroll bar flash */
-  padding: 0.8rem 0 0.8rem 0; /* prevents text jump on Enter keypress */
   resize: none;
-  min-height: 3rem;
-  box-sizing: border-box;
+  min-height: calc(3rem - 10px);
 }
 
 .hiddendiv {
@@ -2656,7 +2658,9 @@ textarea.materialize-textarea {
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
-  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  padding-top: 13px; /* match textarea padding-top */
+  padding-bottom: 0; /* match textarea padding-bottom */
+  line-height: 1.5; /* match textarea line-height */
   position: absolute;
   top: 0;
   z-index: -1;
@@ -3164,9 +3168,16 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
+.select-dropdown.dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
+.select-dropdown.dropdown-content li.selected {
+  background-color: var(--mm-row-hover, rgba(0, 0, 0, 0.08));
+}
 
 .prefix ~ .select-wrapper {
   margin-left: 3rem;

package/dist/dropdown.d.ts

@@ -43,6 +43,8 @@ export interface DropdownAttrs<T extends string | number> extends Attributes {
     iconName?: string;
     /** Add a description underneath the input field. */
     helperText?: string;
+    /** Max height of the dropdown menu, default '400px', use 'none' to disable it */
+    maxHeight?: string;
 }
 /** Pure TypeScript Dropdown component - no Materialize dependencies */
 export declare const Dropdown: <T extends string | number>() => Component<DropdownAttrs<T>>;

package/dist/forms.css

@@ -1252,12 +1252,14 @@ textarea {
   background-color: transparent;
 }
 textarea.materialize-textarea {
+  padding-top: 10px;
+  padding-bottom: 0;
+  height: 35px;
+  margin-bottom: 2.5px;
   line-height: 1.5;
   overflow-y: hidden; /* prevents scroll bar flash */
-  padding: 0.8rem 0 0.8rem 0; /* prevents text jump on Enter keypress */
   resize: none;
-  min-height: 3rem;
-  box-sizing: border-box;
+  min-height: calc(3rem - 10px);
 }
 
 .hiddendiv {
@@ -1265,7 +1267,9 @@ textarea.materialize-textarea {
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
-  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  padding-top: 13px; /* match textarea padding-top */
+  padding-bottom: 0; /* match textarea padding-bottom */
+  line-height: 1.5; /* match textarea line-height */
   position: absolute;
   top: 0;
   z-index: -1;
@@ -1409,9 +1413,16 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
+.select-dropdown.dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
+.select-dropdown.dropdown-content li.selected {
+  background-color: var(--mm-row-hover, rgba(0, 0, 0, 0.08));
+}
 
 .prefix ~ .select-wrapper {
   margin-left: 3rem;

package/dist/index.css

@@ -32,6 +32,7 @@
   --mm-dropdown-hover: #eee;
   --mm-dropdown-focus: #ddd;
   --mm-dropdown-selected: #e3f2fd;
+  --mm-row-hover: rgba(0, 0, 0, 0.04);
   --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);
@@ -91,6 +92,8 @@ body {
   --mm-dropdown-hover: #444;
   --mm-dropdown-focus: #555;
   --mm-dropdown-selected: #1e3a8a;
+  --mm-row-hover: rgba(255, 255, 255, 0.04);
+  --mm-row-stripe: rgba(255, 255, 255, 0.02);
   --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);
@@ -2720,7 +2723,7 @@ a {
 }
 
 /* 2dp elevation modified*/
-.z-depth-1, .sidenav, .collapsible, .dropdown-content, .btn, .btn-floating, .btn-large, .btn-small, .toast, .card-panel, .card, nav {
+.z-depth-1, .sidenav, .dropdown-content, .btn, .btn-floating, .btn-large, .btn-small, .toast, .card-panel, .card, nav {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
 
@@ -5532,41 +5535,77 @@ body.keyboard-focused .dropdown-content li:focus {
 }
 
 .collapsible {
-  border-top: 1px solid var(--mm-border-color, #ddd);
-  border-right: 1px solid var(--mm-border-color, #ddd);
-  border-left: 1px solid var(--mm-border-color, #ddd);
+  border: 1px solid var(--mm-border-color, #e0e0e0);
+  background-color: var(--mm-surface-color, #fff);
   margin: 0.5rem 0 1rem 0;
+  overflow: hidden;
+}
+.collapsible li {
+  list-style-type: none;
 }
 
-.collapsible-header:focus {
-  outline: 0;
+.collapsible-main-header {
+  background-color: var(--mm-surface-color, #fff);
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
+  padding: 10px 20px;
 }
+
 .collapsible-header {
   display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 3rem;
+  line-height: 1.5rem;
+  padding: 1rem;
+  background-color: var(--mm-surface-color, #fff);
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  line-height: 1.5;
-  padding: 1rem;
-  border-bottom: 1px solid var(--mm-border-color, #ddd);
+  transition: background-color 0.25s;
+}
+.collapsible-header:hover {
+  background-color: var(--mm-row-hover, #ddd);
+}
+.collapsible-header:focus {
+  outline: 0;
 }
-.collapsible-header i {
+.collapsible-header i.material-icons {
   width: 2rem;
   font-size: 1.6rem;
-  display: inline-block;
-  text-align: center;
+  line-height: 1.5rem;
+  display: block;
+  flex-shrink: 0;
   margin-right: 1rem;
 }
+.collapsible-header .collapsible-header-text,
+.collapsible-header .collapsible-header-content {
+  flex: 1;
+  align-items: center;
+  gap: 1rem;
+}
 
 .keyboard-focused .collapsible-header:focus {
-  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+  background-color: var(--mm-row-hover, #ddd);
 }
 
 .collapsible-body {
   display: none;
-  border-bottom: 1px solid var(--mm-border-color, #ddd);
+  border-bottom: 1px solid var(--mm-border-color, #e0e0e0);
+  background-color: var(--mm-surface-color, #fff);
   box-sizing: border-box;
   padding: 2rem;
 }
+li:last-child .collapsible-body {
+  border-bottom: none;
+}
+
+li.active .collapsible-body {
+  display: block;
+}
+
+.collapsible.with-header .collapsible-main-header:first-child {
+  border-top: none;
+}
 
 .sidenav .collapsible,
 .sidenav.sidenav-fixed .collapsible {
@@ -5715,29 +5754,38 @@ body.keyboard-focused .dropdown-content li:focus {
   cursor: zoom-out;
 }
 
-#materialbox-overlay {
+.materialbox-overlay {
   position: fixed;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
-  background-color: #292929;
+  background-color: rgba(0, 0, 0, 0.85);
   z-index: 1000;
+  opacity: 0;
+  cursor: zoom-out;
   will-change: opacity;
 }
 
+.materialbox-image {
+  position: fixed;
+  cursor: zoom-out;
+  max-width: none;
+  z-index: 1001;
+  will-change: top, left, width, height;
+}
+
 .materialbox-caption {
   position: fixed;
-  display: none;
-  color: #fff;
-  line-height: 50px;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-size: 16px;
   text-align: center;
-  padding: 0% 15%;
-  height: 50px;
-  z-index: 1000;
+  opacity: 0;
+  z-index: 1002;
+  pointer-events: none;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -6330,12 +6378,14 @@ textarea {
   background-color: transparent;
 }
 textarea.materialize-textarea {
+  padding-top: 10px;
+  padding-bottom: 0;
+  height: 35px;
+  margin-bottom: 2.5px;
   line-height: 1.5;
   overflow-y: hidden; /* prevents scroll bar flash */
-  padding: 0.8rem 0 0.8rem 0; /* prevents text jump on Enter keypress */
   resize: none;
-  min-height: 3rem;
-  box-sizing: border-box;
+  min-height: calc(3rem - 10px);
 }
 
 .hiddendiv {
@@ -6343,7 +6393,9 @@ textarea.materialize-textarea {
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
-  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  padding-top: 13px; /* match textarea padding-top */
+  padding-bottom: 0; /* match textarea padding-bottom */
+  line-height: 1.5; /* match textarea line-height */
   position: absolute;
   top: 0;
   z-index: -1;
@@ -6861,9 +6913,16 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgba(0, 0, 0, 0.08));
 }
 
+.select-dropdown.dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
+.select-dropdown.dropdown-content li.selected {
+  background-color: var(--mm-row-hover, rgba(0, 0, 0, 0.08));
+}
 
 .prefix ~ .select-wrapper {
   margin-left: 3rem;
@@ -9055,6 +9114,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   background-color: #26a69a;
   padding: 10px;
   font-weight: 300;
+  min-width: 200px;
+  position: relative;
 }
 
 .timepicker-text-container {
@@ -9067,6 +9128,8 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  min-width: 180px;
+  width: 100%;
 }
 
 .timepicker-span-hours,
@@ -9077,10 +9140,16 @@ ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.bt
 
 .timepicker-span-hours {
   margin-right: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: right;
 }
 
 .timepicker-span-minutes {
   margin-left: 3px;
+  display: inline-block;
+  min-width: 2ch;
+  text-align: left;
 }
 
 .timepicker-display-am-pm {
@@ -10088,7 +10157,7 @@ nav .theme-toggle:focus {
   transition: background-color 0.2s ease;
 }
 .datatable thead th.sortable:hover {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable thead th.sortable .sort-indicators {
   position: absolute;
@@ -10130,22 +10199,22 @@ nav .theme-toggle:focus {
   cursor: pointer;
 }
 .datatable tbody tr:hover {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable tbody tr:hover td {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable.striped tbody tr:nth-child(odd) {
-  background-color: var(--mm-dropdown-focus);
+  background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
 }
 .datatable.striped tbody tr:nth-child(odd) td {
-  background-color: var(--mm-dropdown-focus);
+  background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
 }
 .datatable.striped tbody tr:nth-child(odd):hover {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable.striped tbody tr:nth-child(odd):hover td {
-  background-color: var(--mm-dropdown-hover);
+  background-color: var(--mm-row-hover);
 }
 .datatable .selection-checkbox {
   width: 40px;
@@ -10294,18 +10363,6 @@ nav .theme-toggle:focus {
   }
 }
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) .datatable-container .datatable thead th.sortable:hover,
-  [data-theme=dark] .datatable-container .datatable thead th.sortable:hover {
-    background-color: var(--mm-dropdown-hover);
-  }
-  :root:not([data-theme]) .datatable-container .datatable tbody tr:hover,
-  [data-theme=dark] .datatable-container .datatable tbody tr:hover {
-    background-color: var(--mm-dropdown-hover);
-  }
-  :root:not([data-theme]) .datatable-container .datatable.striped tbody tr:nth-child(odd),
-  [data-theme=dark] .datatable-container .datatable.striped tbody tr:nth-child(odd) {
-    background-color: var(--mm-table-striped-color, rgba(55, 55, 55, 0.5));
-  }
   :root:not([data-theme]) .datatable-container .datatable.fixed-header thead th,
   [data-theme=dark] .datatable-container .datatable.fixed-header thead th {
     border-bottom: 1px solid var(--mm-border-color);