mithril-materialized 3.5.9 → 3.5.10

package/dist/index.umd.js

@@ -1413,19 +1413,18 @@
                             onclick: onToggle,
                         }, [
                             iconName ? m('i.material-icons', iconName) : undefined,
-                            header ? (typeof header === 'string' ? m('span', header) : header) : undefined,
+                            header
+                                ? typeof header === 'string'
+                                    ? m('span.collapsible-header-text', header)
+                                    : m('.collapsible-header-content', header)
+                                : undefined,
                         ])
                         : undefined,
                     m('.collapsible-body', {
                         style: {
                             display: isActive ? 'block' : 'none',
-                            transition: 'display 0.3s ease',
                         },
-                    }, [
-                        m('.collapsible-body-content', {
-                            style: { padding: '2rem' },
-                        }, body ? (typeof body === 'string' ? m('div', { innerHTML: body }) : body) : undefined),
-                    ]),
+                    }, body ? (typeof body === 'string' ? m('div', { innerHTML: body }) : body) : undefined),
                 ]);
             },
         };
@@ -1448,7 +1447,7 @@
                 });
             },
             view: ({ attrs }) => {
-                const { items, accordion = true, class: c, className, style, id } = attrs;
+                const { items, header, accordion = true, class: c, className, style, id } = attrs;
                 const toggleItem = (index) => {
                     if (accordion) {
                         // Accordion mode: only one item can be active
@@ -1470,12 +1469,22 @@
                         }
                     }
                 };
+                const collapsibleItems = items.map((item, index) => m(CollapsibleItem, Object.assign(Object.assign({}, item), { key: index, isActive: state.activeItems.has(index), onToggle: () => toggleItem(index) })));
                 return items && items.length > 0
-                    ? m('ul.collapsible', {
-                        class: c || className,
-                        style: Object.assign({ border: '1px solid #ddd', borderRadius: '2px', margin: '0.5rem 0 1rem 0' }, style),
-                        id,
-                    }, items.map((item, index) => m(CollapsibleItem, Object.assign(Object.assign({}, item), { key: index, isActive: state.activeItems.has(index), onToggle: () => toggleItem(index) }))))
+                    ? header
+                        ? m('ul.collapsible.with-header', {
+                            class: c || className,
+                            style,
+                            id,
+                        }, [
+                            m('li.collapsible-main-header', m('h4', typeof header === 'string' ? header : header)),
+                            collapsibleItems,
+                        ])
+                        : m('ul.collapsible', {
+                            class: c || className,
+                            style,
+                            id,
+                        }, collapsibleItems)
                     : undefined;
             },
         };
@@ -1579,7 +1588,7 @@
         };
     };
 
-    const defaultI18n$2 = {
+    const defaultI18n$3 = {
         cancel: 'Cancel',
         clear: 'Clear',
         done: 'Ok',
@@ -1687,9 +1696,9 @@
             else if (attrs.displayFormat) {
                 finalFormat = attrs.displayFormat;
             }
-            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$2, onSelect: null, onOpen: null, onClose: null }, attrs);
+            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$3, onSelect: null, onOpen: null, onClose: null }, attrs);
             // Merge i18n properly
-            merged.i18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
+            merged.i18n = Object.assign(Object.assign({}, defaultI18n$3), attrs.i18n);
             return merged;
         };
         const toString = (date, format) => {
@@ -2140,11 +2149,11 @@
                                 prevMonth();
                             },
                         }, m('svg', {
-                            fill: '#000000',
                             height: '24',
                             viewBox: '0 0 24 24',
                             width: '24',
                             xmlns: 'http://www.w3.org/2000/svg',
+                            style: 'fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));',
                         }, [
                             m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
                             m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
@@ -2206,11 +2215,11 @@
                                 nextMonth();
                             },
                         }, m('svg', {
-                            fill: '#000000',
                             height: '24',
                             viewBox: '0 0 24 24',
                             width: '24',
                             xmlns: 'http://www.w3.org/2000/svg',
+                            style: 'fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));',
                         }, [
                             m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
                             m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
@@ -3223,19 +3232,29 @@
                                 if (!controlled && attrs.defaultValue !== undefined) {
                                     textarea.value = String(attrs.defaultValue);
                                 }
-                                // Height will be calculated by hidden div
                                 // Update character count state for counter component
                                 if (maxLength) {
                                     state.currentLength = textarea.value.length;
                                 }
+                                // Calculate initial height after DOM is fully ready
+                                // Use requestAnimationFrame to ensure layout is complete
+                                if (state.hiddenDiv) {
+                                    requestAnimationFrame(() => {
+                                        if (state.hiddenDiv) {
+                                            updateHeight(textarea, state.hiddenDiv);
+                                            m.redraw();
+                                        }
+                                    });
+                                }
                             }, onupdate: ({ dom }) => {
                                 const textarea = dom;
-                                if (state.height)
-                                    textarea.style.height = state.height;
-                                // Trigger height recalculation when value changes programmatically
+                                // Recalculate and apply height
                                 if (state.hiddenDiv) {
                                     updateHeight(textarea, state.hiddenDiv);
                                 }
+                                if (state.height) {
+                                    textarea.style.height = state.height;
+                                }
                             }, onfocus: () => {
                                 state.active = true;
                             }, oninput: (e) => {
@@ -4776,7 +4795,7 @@
 
     /**
      * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
-     * No MaterializeCSS dependencies
+     * Uses CSS classes from _materialbox.scss
      */
     const MaterialBox = () => {
         const state = {
@@ -4792,21 +4811,11 @@
             state.originalImage = img;
             if (attrs.onOpenStart)
                 attrs.onOpenStart();
+            const inDuration = attrs.inDuration || 275;
             // Create overlay
             const overlay = document.createElement('div');
             overlay.className = 'materialbox-overlay';
-            overlay.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.85);
-      z-index: 1000;
-      opacity: 0;
-      transition: opacity ${attrs.inDuration || 275}ms ease;
-      cursor: zoom-out;
-    `;
+            overlay.style.transition = `opacity ${inDuration}ms ease`;
             // Create enlarged image
             const enlargedImg = document.createElement('img');
             enlargedImg.src = img.src;
@@ -4827,36 +4836,18 @@
                 finalWidth = maxHeight * aspectRatio;
             }
             // Set initial position and size (same as original image)
-            enlargedImg.style.cssText = `
-      position: fixed;
-      top: ${imgRect.top}px;
-      left: ${imgRect.left}px;
-      width: ${imgRect.width}px;
-      height: ${imgRect.height}px;
-      transition: all ${attrs.inDuration || 275}ms ease;
-      cursor: zoom-out;
-      max-width: none;
-      z-index: 1001;
-    `;
+            enlargedImg.style.top = `${imgRect.top}px`;
+            enlargedImg.style.left = `${imgRect.left}px`;
+            enlargedImg.style.width = `${imgRect.width}px`;
+            enlargedImg.style.height = `${imgRect.height}px`;
+            enlargedImg.style.transition = `all ${inDuration}ms ease`;
             // Add caption if provided
             let caption = null;
             if (attrs.caption) {
                 caption = document.createElement('div');
                 caption.className = 'materialbox-caption';
                 caption.textContent = attrs.caption;
-                caption.style.cssText = `
-        position: fixed;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        color: white;
-        font-size: 16px;
-        text-align: center;
-        opacity: 0;
-        transition: opacity ${attrs.inDuration || 275}ms ease ${attrs.inDuration || 275}ms;
-        z-index: 1002;
-        pointer-events: none;
-      `;
+                caption.style.transition = `opacity ${inDuration}ms ease ${inDuration}ms`;
             }
             // Add to DOM
             document.body.appendChild(overlay);
@@ -4891,7 +4882,7 @@
             setTimeout(() => {
                 if (attrs.onOpenEnd)
                     attrs.onOpenEnd();
-            }, attrs.inDuration || 275);
+            }, inDuration);
         };
         const closeBox = (attrs) => {
             if (!state.isOpen || !state.originalImage || !state.overlay || !state.overlayImage)
@@ -4948,8 +4939,14 @@
             },
             view: ({ attrs }) => {
                 const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
+                // Build style attribute - handle both string and object styles
+                let imgStyle = style || {};
+                if (typeof style !== 'string') {
+                    // If style is an object or undefined, add default styles as object
+                    imgStyle = Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, (style || {}));
+                }
                 return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
-                    height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                    height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: imgStyle, onclick: (e) => {
                         e.preventDefault();
                         openBox(e.target, attrs);
                     } }));
@@ -5279,6 +5276,11 @@
         };
     };
 
+    const defaultI18n$2 = {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok',
+    };
     const defaultOptions = {
         dialRadius: 135,
         outerRadius: 105,
@@ -5289,11 +5291,7 @@
         defaultTime: 'now',
         fromNow: 0,
         showClearBtn: false,
-        i18n: {
-            cancel: 'Cancel',
-            clear: 'Clear',
-            done: 'Ok',
-        },
+        i18n: defaultI18n$2,
         autoClose: false,
         twelveHour: true,
         vibrate: true,
@@ -5443,7 +5441,7 @@
             state.hours = hours;
             state.minutes = minutes;
             if (state.spanHours) {
-                state.spanHours.innerHTML = state.hours.toString();
+                state.spanHours.innerHTML = addLeadingZero(state.hours);
             }
             if (state.spanMinutes) {
                 state.spanMinutes.innerHTML = addLeadingZero(state.minutes);
@@ -5551,7 +5549,7 @@
             }
             state[state.currentView] = value;
             if (isHours && state.spanHours) {
-                state.spanHours.innerHTML = value.toString();
+                state.spanHours.innerHTML = addLeadingZero(value);
             }
             else if (!isHours && state.spanMinutes) {
                 state.spanMinutes.innerHTML = addLeadingZero(value);
@@ -5685,7 +5683,7 @@
         const TimepickerModal = () => {
             return {
                 view: ({ attrs }) => {
-                    const { showClearBtn, clearLabel, closeLabel, doneLabel } = attrs;
+                    const { i18n, showClearBtn } = attrs;
                     return [
                         m('.modal-content.timepicker-container', [
                             m('.timepicker-digital-display', [
@@ -5697,7 +5695,7 @@
                                             oncreate: (vnode) => {
                                                 state.spanHours = vnode.dom;
                                             },
-                                        }, state.hours.toString()),
+                                        }, addLeadingZero(state.hours)),
                                         ':',
                                         m('span.timepicker-span-minutes', {
                                             class: state.currentView === 'minutes' ? 'text-primary' : '',
@@ -5777,18 +5775,18 @@
                                         tabindex: options.twelveHour ? '3' : '1',
                                         style: showClearBtn ? '' : 'visibility: hidden;',
                                         onclick: () => clear(),
-                                    }, clearLabel),
+                                    }, i18n.clear),
                                     m('.confirmation-btns', [
                                         m('button.btn-flat.timepicker-close.waves-effect', {
                                             type: 'button',
                                             tabindex: options.twelveHour ? '3' : '1',
                                             onclick: () => close(),
-                                        }, closeLabel),
+                                        }, i18n.cancel),
                                         m('button.btn-flat.timepicker-close.waves-effect', {
                                             type: 'button',
                                             tabindex: options.twelveHour ? '3' : '1',
                                             onclick: () => done(),
-                                        }, doneLabel),
+                                        }, i18n.done),
                                     ]),
                                 ]),
                             ]),
@@ -5805,7 +5803,6 @@
             }
         };
         const renderPickerToPortal = (attrs) => {
-            const { showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel' } = attrs;
             const pickerModal = m('.timepicker-modal-wrapper', {
                 style: {
                     position: 'fixed',
@@ -5848,10 +5845,8 @@
                     },
                 }, [
                     m(TimepickerModal, {
-                        showClearBtn,
-                        clearLabel,
-                        closeLabel,
-                        doneLabel: 'OK',
+                        i18n: options.i18n,
+                        showClearBtn: options.showClearBtn,
                     }),
                 ]),
             ]);
@@ -5911,7 +5906,7 @@
                 }
             },
             view: ({ attrs }) => {
-                const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel', twelveHour, className: cn1, class: cn2, } = attrs;
+                const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, twelveHour, className: cn1, class: cn2, } = attrs;
                 const className = cn1 || cn2 || 'col s12';
                 // Format time value for display
                 const formatTime = (hours, minutes, use12Hour) => {
@@ -6357,7 +6352,7 @@
             // Render ungrouped options first
             attrs.options
                 .filter((option) => !option.group)
-                .map((option) => m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === attrs.options.indexOf(option) ? 'focused' : '' }, (option.disabled
+                .map((option) => m('li', Object.assign({ class: `${option.disabled ? 'disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
                 ? {}
                 : {
                     onclick: () => {

package/dist/material-box.d.ts

@@ -33,6 +33,6 @@ export interface MaterialBoxAttrs extends MaterialBoxOptions, Attributes {
 }
 /**
  * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
- * No MaterializeCSS dependencies
+ * Uses CSS classes from _materialbox.scss
  */
 export declare const MaterialBox: FactoryComponent<MaterialBoxAttrs>;

package/dist/pickers.css

@@ -371,6 +371,8 @@
   background-color: #26a69a;
   padding: 10px;
   font-weight: 300;
+  min-width: 200px;
+  position: relative;
 }
 
 .timepicker-text-container {
@@ -381,6 +383,8 @@
   font-weight: 400;
   position: relative;
   user-select: none;
+  min-width: 180px;
+  width: 100%;
 }
 
 .timepicker-span-hours,
@@ -391,10 +395,16 @@
 
 .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 {

package/dist/timepicker.d.ts

@@ -32,10 +32,6 @@ export interface TimePickerAttrs extends InputAttrs<string>, TimepickerOptions {
     useModal?: boolean;
     /** Allow format toggle between 12h/24h (for inline mode) */
     allowFormatToggle?: boolean;
-    /** Clear button label */
-    clearLabel?: string;
-    /** Close button label */
-    closeLabel?: string;
 }
 /**
  * TimePicker component based on original Materialize CSS timepicker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -26,8 +26,7 @@
     "./pickers.css": "./dist/pickers.css",
     "./advanced.css": "./dist/advanced.css",
     "./utilities.css": "./dist/utilities.css",
-    "./sass/*": "./sass/*",
-    "./src/*": "./src/*"
+    "./sass/*": "./sass/*"
   },
   "sideEffects": false,
   "files": [

package/sass/components/_collapsible.scss

@@ -2,42 +2,95 @@
 @use "global";
 
 .collapsible {
-  border-top: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
-  border-right: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
-  border-left: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
+  border: 1px solid var(--mm-border-color, variables.$collection-border-color);
+  background-color: var(--mm-surface-color, variables.$collection-bg-color);
   margin: variables.$element-top-margin 0 variables.$element-bottom-margin 0;
-  @extend .z-depth-1 !optional;
-}
+  overflow: hidden;
 
-.collapsible-header {
-  &:focus {
-    outline: 0
+  li {
+    list-style-type: none;
   }
+}
 
+// Main header (top-level header for the whole collapsible)
+.collapsible-main-header {
+  background-color: var(--mm-surface-color, variables.$collection-bg-color);
+  border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
+  padding: 10px 20px;
+  // Don't override h4 styling - let it use default typography
+  // This ensures consistent height with Collection headers
+}
+
+// Item header (collapsible item header)
+.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, variables.$collection-bg-color);
+  border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
-  line-height: 1.5;
-  padding: 1rem;
-  border-bottom: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
+  transition: background-color .25s;
+
+  &:hover {
+    background-color: var(--mm-row-hover, variables.$collection-hover-bg-color);
+  }
+
+  &:focus {
+    outline: 0;
+  }
 
-  i {
+  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;
   }
+
+  // Wrapper for header content - takes remaining space
+  .collapsible-header-text,
+  .collapsible-header-content {
+    flex: 1;
+    display: flex;
+    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, variables.$collection-hover-bg-color);
 }
 
 .collapsible-body {
   display: none;
-  border-bottom: 1px solid var(--mm-border-color, variables.$collapsible-border-color);
+  border-bottom: 1px solid var(--mm-border-color, variables.$collection-border-color);
+  background-color: var(--mm-surface-color, variables.$collection-bg-color);
   box-sizing: border-box;
   padding: 2rem;
+
+  // Remove bottom border from last item
+  li:last-child & {
+    border-bottom: none;
+  }
+}
+
+// Active state
+li.active {
+  .collapsible-body {
+    display: block;
+  }
+}
+
+// Collapsible with header
+.collapsible.with-header {
+  .collapsible-main-header:first-child {
+    border-top: none;
+  }
 }
 
 // Sidenav collapsible styling
@@ -65,7 +118,7 @@
   .collapsible-body {
     border: 0;
     background-color: var(--mm-surface-color, variables.$collapsible-header-color);
-  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+    color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
 
     li a {
       padding: 0 (7.5px + variables.$sidenav-padding)

package/sass/components/_datatable.scss

@@ -93,7 +93,7 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: var(--mm-dropdown-hover);
+      background-color: var(--mm-row-hover);
     }
 
     .sort-indicators {
@@ -147,27 +147,27 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--mm-dropdown-hover);
+      background-color: var(--mm-row-hover);
       
       td {
-        background-color: var(--mm-dropdown-hover);
+        background-color: var(--mm-row-hover);
       }
     }
   }
 
   // Enhanced striped rows for dark theme
   &.striped tbody tr:nth-child(odd) {
-    background-color: var(--mm-dropdown-focus);
+    background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
     
     td {
-      background-color: var(--mm-dropdown-focus);
+      background-color: var(--mm-row-stripe, var(--mm-table-striped-color));
     }
     
     &:hover {
-      background-color: var(--mm-dropdown-hover);
+      background-color: var(--mm-row-hover);
       
       td {
-        background-color: var(--mm-dropdown-hover);
+        background-color: var(--mm-row-hover);
       }
     }
   }
@@ -364,18 +364,6 @@
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) .datatable-container,
   [data-theme="dark"] .datatable-container {
-    .datatable thead th.sortable:hover {
-      background-color: var(--mm-dropdown-hover);
-    }
-
-    .datatable tbody tr:hover {
-      background-color: var(--mm-dropdown-hover);
-    }
-
-    .datatable.striped tbody tr:nth-child(odd) {
-      background-color: variables.$table-striped-color;
-    }
-
     .datatable.fixed-header thead th {
       border-bottom: 1px solid var(--mm-border-color);
     }

package/sass/components/_materialbox.scss

@@ -16,28 +16,37 @@
   }
 }
 
-#materialbox-overlay {
-  position:fixed;
+.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;
-}
+}