mithril-materialized 2.0.0-beta.9 → 2.0.0-rc.2

package/dist/index.umd.js

@@ -420,12 +420,18 @@
         return () => {
             return {
                 view: ({ attrs }) => {
-                    const { modalId, tooltip, tooltipPostion, iconName, iconClass, label, className, attr } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr"]);
-                    const cn = [modalId ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                    const { modalId, tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
+                    iconName, iconClass, label, className, attr, variant } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr", "variant"]);
+                    // Handle both new variant prop and legacy modalId/type
+                    const buttonType = (variant === null || variant === void 0 ? void 0 : variant.type) || (modalId ? 'modal' : type || 'button');
+                    const modalTarget = (variant === null || variant === void 0 ? void 0 : variant.type) === 'modal' ? variant.modalId : modalId;
+                    const cn = [modalTarget ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
                         .filter(Boolean)
                         .join(' ')
                         .trim();
-                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalId ? `#${modalId}` : undefined, 'data-position': tooltip ? tooltipPostion || 'top' : undefined, 'data-tooltip': tooltip || undefined, type }), 
+                    // Use tooltipPosition if available, fallback to legacy tooltipPostion
+                    const position = tooltipPosition || tooltipPostion || 'top';
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalTarget ? `#${modalTarget}` : undefined, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType === 'modal' ? 'button' : buttonType }), 
                     // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
                     //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
                     // }${toAttributeString(attr)}`, {}
@@ -834,6 +840,18 @@
             'M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z',
             'M0 0h24v24H0z',
         ],
+        chevron: [
+            'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
+            'M0 0h24v24H0z', // background
+        ],
+        expand: [
+            'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
+            'M0 0h24v24H0z', // background
+        ],
+        collapse: [
+            'M19 13H5v-2h14v2z', // minus
+            'M0 0h24v24H0z', // background
+        ],
     };
     const MaterialIcon = () => {
         return {
@@ -843,8 +861,8 @@
                 const rotationMap = {
                     down: 0,
                     up: 180,
-                    left: -90,
-                    right: 90,
+                    left: 90,
+                    right: -90,
                 };
                 const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
                 const transform = rotation ? `rotate(${rotation}deg)` : undefined;
@@ -1153,7 +1171,7 @@
             const lang = language || 'lang-TypeScript';
             const label = lang.replace('lang-', '');
             const cb = code instanceof Array ? code.join('\n') : code;
-            const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim();
+            const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
             return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
                 m('div', m('label', label)),
                 m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
@@ -1336,7 +1354,7 @@
         };
     };
 
-    const defaultI18n = {
+    const defaultI18n$2 = {
         cancel: 'Cancel',
         clear: 'Clear',
         done: 'Ok',
@@ -1444,9 +1462,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, 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$2, onSelect: null, onOpen: null, onClose: null }, attrs);
             // Merge i18n properly
-            merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+            merged.i18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
             return merged;
         };
         const toString = (date, format) => {
@@ -1465,6 +1483,42 @@
             });
             return result;
         };
+        // New function to format any specific date (not just state.date)
+        const formatDate = (date, format, options) => {
+            if (!date || !isDate(date)) {
+                return '';
+            }
+            // Split format into tokens - match longer patterns first
+            const formatTokens = /(dddd|ddd|dd|d|mmmm|mmm|mm|m|yyyy|yy)/g;
+            let result = format;
+            // Create temporary formats for the specific date
+            const dateFormats = {
+                d: () => date.getDate(),
+                dd: () => {
+                    const d = date.getDate();
+                    return (d < 10 ? '0' : '') + d;
+                },
+                ddd: () => options.i18n.weekdaysShort[date.getDay()],
+                dddd: () => options.i18n.weekdays[date.getDay()],
+                m: () => date.getMonth() + 1,
+                mm: () => {
+                    const m = date.getMonth() + 1;
+                    return (m < 10 ? '0' : '') + m;
+                },
+                mmm: () => options.i18n.monthsShort[date.getMonth()],
+                mmmm: () => options.i18n.months[date.getMonth()],
+                yy: () => ('' + date.getFullYear()).slice(2),
+                yyyy: () => date.getFullYear(),
+            };
+            // Replace all format tokens with actual values
+            result = result.replace(formatTokens, (match) => {
+                if (dateFormats[match]) {
+                    return String(dateFormats[match]());
+                }
+                return match;
+            });
+            return result;
+        };
         const setDate = (date, preventOnSelect = false, options) => {
             if (!date) {
                 state.date = null;
@@ -1491,6 +1545,55 @@
                 options.onSelect(state.date);
             }
         };
+        const handleRangeSelection = (date, options) => {
+            setToStartOfDay(date);
+            // First click or reset - set start date
+            if (!state.startDate || (state.startDate && state.endDate)) {
+                state.startDate = new Date(date.getTime());
+                state.endDate = null;
+                state.selectionMode = 'end';
+                state.isSelectingRange = true;
+            }
+            // Second click - set end date
+            else if (state.startDate && !state.endDate) {
+                // Ensure proper order (start <= end)
+                if (date < state.startDate) {
+                    state.endDate = new Date(state.startDate.getTime());
+                    state.startDate = new Date(date.getTime());
+                }
+                else {
+                    state.endDate = new Date(date.getTime());
+                }
+                // Validate range constraints
+                if (options.minDateRange || options.maxDateRange) {
+                    const daysDiff = Math.ceil((state.endDate.getTime() - state.startDate.getTime()) / (1000 * 60 * 60 * 24));
+                    if (options.minDateRange && daysDiff < options.minDateRange) {
+                        // Range too short, reset
+                        state.startDate = new Date(date.getTime());
+                        state.endDate = null;
+                        state.selectionMode = 'end';
+                        return;
+                    }
+                    if (options.maxDateRange && daysDiff > options.maxDateRange) {
+                        // Range too long, reset
+                        state.startDate = new Date(date.getTime());
+                        state.endDate = null;
+                        state.selectionMode = 'end';
+                        return;
+                    }
+                }
+                state.selectionMode = null;
+                state.isSelectingRange = false;
+                // Call onSelect with both dates
+                if (options.onSelect) {
+                    options.onSelect(state.startDate, state.endDate);
+                }
+                // Auto-close if enabled
+                if (options.autoClose) {
+                    state.isOpen = false;
+                }
+            }
+        };
         const gotoDate = (date) => {
             if (!isDate(date)) {
                 return;
@@ -1549,6 +1652,21 @@
                         arr.push('is-selected');
                         ariaSelected = 'true';
                     }
+                    // Range selection states
+                    if (opts.isRangeStart) {
+                        arr.push('is-range-start');
+                        ariaSelected = 'true';
+                    }
+                    if (opts.isRangeEnd) {
+                        arr.push('is-range-end');
+                        ariaSelected = 'true';
+                    }
+                    if (opts.isInRange) {
+                        arr.push('is-in-range');
+                    }
+                    if (opts.isRangePreview) {
+                        arr.push('is-range-preview');
+                    }
                     if (opts.hasEvent) {
                         arr.push('has-event');
                     }
@@ -1569,9 +1687,14 @@
                                     const month = parseInt(target.getAttribute('data-month') || '0', 10);
                                     const day = parseInt(target.getAttribute('data-day') || '0', 10);
                                     const selectedDate = new Date(year, month, day);
-                                    setDate(selectedDate, false, options);
-                                    if (options.autoClose) {
-                                        state.isOpen = false;
+                                    if (options.dateRange) {
+                                        handleRangeSelection(selectedDate, options);
+                                    }
+                                    else {
+                                        setDate(selectedDate, false, options);
+                                        if (options.autoClose) {
+                                            state.isOpen = false;
+                                        }
                                     }
                                 }
                             },
@@ -1631,16 +1754,37 @@
                             (options.maxDate && day > options.maxDate) ||
                             (options.disableWeekends && isWeekend(day)) ||
                             (options.disableDayFn && options.disableDayFn(day));
+                        // Range selection states
+                        let isRangeStart = false;
+                        let isRangeEnd = false;
+                        let isInRange = false;
+                        let isRangePreview = false;
+                        if (options.dateRange) {
+                            if (state.startDate && compareDates(day, state.startDate)) {
+                                isRangeStart = true;
+                            }
+                            if (state.endDate && compareDates(day, state.endDate)) {
+                                isRangeEnd = true;
+                            }
+                            if (state.startDate && state.endDate && day > state.startDate && day < state.endDate) {
+                                isInRange = true;
+                            }
+                            // TODO: Add hover preview logic for range selection
+                        }
                         const dayConfig = {
                             day: dayNumber,
                             month: monthNumber,
                             year: yearNumber,
                             hasEvent: false,
-                            isSelected: isSelected,
+                            isSelected: !options.dateRange && isSelected, // Only use isSelected in single date mode
                             isToday: isToday,
                             isDisabled: isDisabled,
                             isEmpty: isEmpty,
                             showDaysInNextAndPreviousMonths: false,
+                            isRangeStart: isRangeStart,
+                            isRangeEnd: isRangeEnd,
+                            isInRange: isInRange,
+                            isRangePreview: isRangePreview,
                         };
                         // Add week number cell at the beginning of each row
                         if (r === 0 && options.showWeekNumbers) {
@@ -1687,14 +1831,58 @@
             return {
                 view: ({ attrs }) => {
                     const { options } = attrs;
-                    const displayDate = isDate(state.date) ? state.date : new Date();
-                    const day = options.i18n.weekdaysShort[displayDate.getDay()];
-                    const month = options.i18n.monthsShort[displayDate.getMonth()];
-                    const date = displayDate.getDate();
-                    return m('.datepicker-date-display', [
-                        m('span.year-text', displayDate.getFullYear()),
-                        m('span.date-text', `${day}, ${month} ${date}`),
-                    ]);
+                    if (options.dateRange) {
+                        // Range display
+                        const startDate = state.startDate;
+                        const endDate = state.endDate;
+                        if (startDate && endDate) {
+                            // Both dates selected
+                            const startDay = options.i18n.weekdaysShort[startDate.getDay()];
+                            const startMonth = options.i18n.monthsShort[startDate.getMonth()];
+                            const endDay = options.i18n.weekdaysShort[endDate.getDay()];
+                            const endMonth = options.i18n.monthsShort[endDate.getMonth()];
+                            return m('.datepicker-date-display.range-display', [
+                                m('span.year-text', startDate.getFullYear()),
+                                m('span.date-text', [
+                                    m('span.start-date', `${startDay}, ${startMonth} ${startDate.getDate()}`),
+                                    m('span.range-separator', ' - '),
+                                    m('span.end-date', `${endDay}, ${endMonth} ${endDate.getDate()}`),
+                                ]),
+                            ]);
+                        }
+                        else if (startDate) {
+                            // Only start date selected
+                            const startDay = options.i18n.weekdaysShort[startDate.getDay()];
+                            const startMonth = options.i18n.monthsShort[startDate.getMonth()];
+                            return m('.datepicker-date-display.range-display', [
+                                m('span.year-text', startDate.getFullYear()),
+                                m('span.date-text', [
+                                    m('span.start-date', `${startDay}, ${startMonth} ${startDate.getDate()}`),
+                                    m('span.range-separator', ' - '),
+                                    m('span.end-date.placeholder', 'Select end date'),
+                                ]),
+                            ]);
+                        }
+                        else {
+                            // No dates selected
+                            const currentDate = new Date();
+                            return m('.datepicker-date-display.range-display', [
+                                m('span.year-text', currentDate.getFullYear()),
+                                m('span.date-text.placeholder', 'Select date range'),
+                            ]);
+                        }
+                    }
+                    else {
+                        // Single date display (original behavior)
+                        const displayDate = isDate(state.date) ? state.date : new Date();
+                        const day = options.i18n.weekdaysShort[displayDate.getDay()];
+                        const month = options.i18n.monthsShort[displayDate.getMonth()];
+                        const date = displayDate.getDate();
+                        return m('.datepicker-date-display', [
+                            m('span.year-text', displayDate.getFullYear()),
+                            m('span.date-text', `${day}, ${month} ${date}`),
+                        ]);
+                    }
                 }
             };
         };
@@ -1843,6 +2031,10 @@
                     id: uniqueId(),
                     isOpen: false,
                     date: null,
+                    startDate: null,
+                    endDate: null,
+                    selectionMode: null,
+                    isSelectingRange: false,
                     calendars: [{ month: 0, year: 0 }],
                     monthDropdownOpen: false,
                     yearDropdownOpen: false,
@@ -1867,17 +2059,35 @@
                         yyyy: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0; },
                     },
                 };
-                // Initialize date
-                let defaultDate = attrs.defaultDate;
-                if (!defaultDate && attrs.initialValue) {
-                    defaultDate = new Date(attrs.initialValue);
-                }
-                if (isDate(defaultDate)) {
-                    // Always set the date if we have initialValue or defaultDate
-                    setDate(defaultDate, true, options);
+                // Initialize date or date range
+                if (options.dateRange) {
+                    // Initialize range dates
+                    if (attrs.initialStartDate && isDate(attrs.initialStartDate)) {
+                        state.startDate = new Date(attrs.initialStartDate.getTime());
+                        setToStartOfDay(state.startDate);
+                        gotoDate(state.startDate);
+                    }
+                    if (attrs.initialEndDate && isDate(attrs.initialEndDate)) {
+                        state.endDate = new Date(attrs.initialEndDate.getTime());
+                        setToStartOfDay(state.endDate);
+                    }
+                    if (!state.startDate && !state.endDate) {
+                        gotoDate(new Date());
+                    }
                 }
                 else {
-                    gotoDate(new Date());
+                    // Single date initialization (original behavior)
+                    let defaultDate = attrs.defaultDate;
+                    if (!defaultDate && attrs.initialValue) {
+                        defaultDate = new Date(attrs.initialValue);
+                    }
+                    if (isDate(defaultDate)) {
+                        // Always set the date if we have initialValue or defaultDate
+                        setDate(defaultDate, true, options);
+                    }
+                    else {
+                        gotoDate(new Date());
+                    }
                 }
                 // Add document click listener to close dropdowns
                 document.addEventListener('click', handleDocumentClick);
@@ -1893,19 +2103,61 @@
                 const className = cn1 || cn2 || 'col s12';
                 // Calculate display value for the input
                 let displayValue = '';
-                if (state.date) {
-                    displayValue = toString(state.date, options.format);
+                if (options.dateRange) {
+                    // Handle date range display
+                    const formatToUse = attrs.displayFormat || options.format;
+                    if (state.startDate && state.endDate) {
+                        let startStr, endStr;
+                        if (attrs.displayFormat) {
+                            // Custom display format for date range
+                            startStr = attrs.displayFormat
+                                .replace(/yyyy/gi, state.startDate.getFullYear().toString())
+                                .replace(/mm/gi, (state.startDate.getMonth() + 1).toString().padStart(2, '0'))
+                                .replace(/dd/gi, state.startDate.getDate().toString().padStart(2, '0'));
+                            endStr = attrs.displayFormat
+                                .replace(/yyyy/gi, state.endDate.getFullYear().toString())
+                                .replace(/mm/gi, (state.endDate.getMonth() + 1).toString().padStart(2, '0'))
+                                .replace(/dd/gi, state.endDate.getDate().toString().padStart(2, '0'));
+                        }
+                        else {
+                            // Standard format
+                            startStr = formatDate(state.startDate, formatToUse, options);
+                            endStr = formatDate(state.endDate, formatToUse, options);
+                        }
+                        displayValue = `${startStr} - ${endStr}`;
+                    }
+                    else if (state.startDate) {
+                        let startStr;
+                        if (attrs.displayFormat) {
+                            // Custom display format for single date
+                            startStr = attrs.displayFormat
+                                .replace(/yyyy/gi, state.startDate.getFullYear().toString())
+                                .replace(/mm/gi, (state.startDate.getMonth() + 1).toString().padStart(2, '0'))
+                                .replace(/dd/gi, state.startDate.getDate().toString().padStart(2, '0'));
+                        }
+                        else {
+                            // Standard format
+                            startStr = formatDate(state.startDate, formatToUse, options);
+                        }
+                        displayValue = `${startStr} - `;
+                    }
                 }
-                // Custom date format handling
-                if (attrs.displayFormat) {
-                    // const formatRegex = /(yyyy|mm|dd)/gi;
-                    let customDisplayValue = attrs.displayFormat;
+                else {
+                    // Single date display (original behavior)
                     if (state.date) {
-                        customDisplayValue = customDisplayValue
-                            .replace(/yyyy/gi, state.date.getFullYear().toString())
-                            .replace(/mm/gi, (state.date.getMonth() + 1).toString().padStart(2, '0'))
-                            .replace(/dd/gi, state.date.getDate().toString().padStart(2, '0'));
-                        displayValue = customDisplayValue;
+                        displayValue = toString(state.date, options.format);
+                    }
+                    // Custom date format handling
+                    if (attrs.displayFormat) {
+                        // const formatRegex = /(yyyy|mm|dd)/gi;
+                        let customDisplayValue = attrs.displayFormat;
+                        if (state.date) {
+                            customDisplayValue = customDisplayValue
+                                .replace(/yyyy/gi, state.date.getFullYear().toString())
+                                .replace(/mm/gi, (state.date.getMonth() + 1).toString().padStart(2, '0'))
+                                .replace(/dd/gi, state.date.getDate().toString().padStart(2, '0'));
+                            displayValue = customDisplayValue;
+                        }
                     }
                 }
                 return m('.input-field', {
@@ -2009,8 +2261,19 @@
                                             type: 'button',
                                             onclick: () => {
                                                 state.isOpen = false;
-                                                if (state.date && onchange) {
-                                                    onchange(toString(state.date, 'yyyy-mm-dd')); // Always return ISO format
+                                                if (options.dateRange) {
+                                                    // Range mode
+                                                    if (state.startDate && state.endDate && onchange) {
+                                                        const startStr = toString(state.startDate, 'yyyy-mm-dd');
+                                                        const endStr = toString(state.endDate, 'yyyy-mm-dd');
+                                                        onchange(`${startStr} - ${endStr}`);
+                                                    }
+                                                }
+                                                else {
+                                                    // Single date mode
+                                                    if (state.date && onchange) {
+                                                        onchange(toString(state.date, 'yyyy-mm-dd')); // Always return ISO format
+                                                    }
                                                 }
                                                 if (options.onClose)
                                                     options.onClose();
@@ -2039,246 +2302,458 @@
         };
     };
 
-    /** Pure TypeScript Dropdown component - no Materialize dependencies */
-    const Dropdown = () => {
-        const state = {
-            isOpen: false,
-            initialValue: undefined,
-            id: '',
-            focusedIndex: -1,
-            inputRef: null,
-            dropdownRef: null,
-        };
-        const handleKeyDown = (e, items, onchange) => {
-            const availableItems = items.filter((item) => !item.divider && !item.disabled);
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (!state.isOpen) {
-                        state.isOpen = true;
-                        state.focusedIndex = 0;
+    // Tooltip component for range sliders
+    const RangeTooltip = {
+        view: ({ attrs: { show, position, value } }) => {
+            return show ? m(`.value-tooltip.${position}`, value.toFixed(0)) : null;
+        },
+    };
+    const DoubleRangeTooltip = {
+        view: ({ attrs: { show, orientation, value } }) => {
+            return show ? m(`.value.${orientation}`, value.toFixed(0)) : null;
+        },
+    };
+    // Utility functions
+    const getPercentage = (value, min, max) => {
+        return ((value - min) / (max - min)) * 100;
+    };
+    const positionToValue = (e, rect, min, max, step, vertical) => {
+        let percentage;
+        if (vertical) {
+            percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+        }
+        else {
+            percentage = ((e.clientX - rect.left) / rect.width) * 100;
+        }
+        percentage = Math.max(0, Math.min(100, percentage));
+        const value = min + (percentage / 100) * (max - min);
+        return Math.round(value / step) * step;
+    };
+    const handleKeyboardNavigation = (key, currentValue, min, max, step) => {
+        const largeStep = step * 10;
+        switch (key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                return Math.max(min, currentValue - step);
+            case 'ArrowRight':
+            case 'ArrowUp':
+                return Math.min(max, currentValue + step);
+            case 'PageDown':
+                return Math.max(min, currentValue - largeStep);
+            case 'PageUp':
+                return Math.min(max, currentValue + largeStep);
+            case 'Home':
+                return min;
+            case 'End':
+                return max;
+            default:
+                return null;
+        }
+    };
+    const initRangeState = (state, attrs) => {
+        const { min = 0, max = 100, initialValue, minValue, maxValue } = attrs;
+        // Initialize single range value
+        if (initialValue !== undefined) {
+            const currentValue = initialValue;
+            if (state.singleValue === undefined) {
+                state.singleValue = currentValue;
+            }
+            if (state.lastInitialValue !== initialValue && !state.hasUserInteracted) {
+                state.singleValue = initialValue;
+                state.lastInitialValue = initialValue;
+            }
+        }
+        else if (state.singleValue === undefined) {
+            state.singleValue = min;
+        }
+        // Initialize range values
+        const currentMinValue = minValue !== undefined ? minValue : min;
+        const currentMaxValue = maxValue !== undefined ? maxValue : max;
+        if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
+            state.rangeMinValue = currentMinValue;
+            state.rangeMaxValue = currentMaxValue;
+        }
+        if (!state.hasUserInteracted &&
+            ((minValue !== undefined && state.lastMinValue !== minValue) ||
+                (maxValue !== undefined && state.lastMaxValue !== maxValue))) {
+            state.rangeMinValue = currentMinValue;
+            state.rangeMaxValue = currentMaxValue;
+            state.lastMinValue = minValue;
+            state.lastMaxValue = maxValue;
+        }
+        // Initialize active thumb if not set
+        if (state.activeThumb === null) {
+            state.activeThumb = 'min';
+        }
+        // Initialize dragging state
+        if (state.isDragging === undefined) {
+            state.isDragging = false;
+        }
+    };
+    const updateRangeValues = (minValue, maxValue, attrs, state, immediate) => {
+        // Ensure min doesn't exceed max and vice versa
+        if (minValue > maxValue)
+            minValue = maxValue;
+        if (maxValue < minValue)
+            maxValue = minValue;
+        state.rangeMinValue = minValue;
+        state.rangeMaxValue = maxValue;
+        state.hasUserInteracted = true;
+        // Call oninput for immediate feedback or onchange for final changes
+        if (immediate && attrs.oninput) {
+            attrs.oninput(minValue, maxValue);
+        }
+        else if (!immediate && attrs.onchange) {
+            attrs.onchange(minValue, maxValue);
+        }
+    };
+    // Single Range Slider Component
+    const SingleRangeSlider = {
+        oninit({ state }) {
+            if (!state.componentInitialized) {
+                state.componentInitialized = true;
+            }
+        },
+        onremove({ state }) {
+            if (state.cleanupMouseEvents) {
+                state.cleanupMouseEvents();
+                state.cleanupMouseEvents = null;
+            }
+        },
+        view({ attrs, state, }) {
+            const { cn, style, iconName, id, label, isMandatory, helperText, min = 0, max = 100, step = 1, vertical = false, showValue = false, valueDisplay, height = '200px', disabled = false, tooltipPos = 'top', oninput, onchange, } = attrs;
+            // Apply fallback logic for valueDisplay if not explicitly set
+            const finalValueDisplay = valueDisplay || (showValue ? 'always' : 'none');
+            // Initialize state
+            initRangeState(state, attrs);
+            const percentage = getPercentage(state.singleValue, min, max);
+            const containerStyle = vertical ? { height } : {};
+            const orientation = vertical ? 'vertical' : 'horizontal';
+            const progressStyle = vertical ? { height: `${percentage}%` } : { width: `${percentage}%` };
+            const thumbStyle = vertical ? { bottom: `${percentage}%` } : { left: `${percentage}%` };
+            // Determine tooltip position for vertical sliders
+            const tooltipPosition = vertical
+                ? tooltipPos === 'top' || tooltipPos === 'bottom'
+                    ? 'right'
+                    : tooltipPos
+                : tooltipPos;
+            const updateSingleValue = (newValue, immediate = false) => {
+                state.singleValue = newValue;
+                state.hasUserInteracted = true;
+                if (immediate && oninput) {
+                    oninput(newValue);
+                }
+                else if (!immediate && onchange) {
+                    onchange(newValue);
+                }
+            };
+            const handleMouseDown = (e) => {
+                if (disabled)
+                    return;
+                e.preventDefault();
+                state.isDragging = true;
+                if (finalValueDisplay === 'auto') {
+                    m.redraw();
+                }
+                const thumbElement = e.currentTarget;
+                const container = thumbElement.parentElement;
+                if (!container)
+                    return;
+                const handleMouseMove = (e) => {
+                    if (!state.isDragging || !container)
+                        return;
+                    const rect = container.getBoundingClientRect();
+                    const value = positionToValue(e, rect, min, max, step, vertical);
+                    updateSingleValue(value, true);
+                    m.redraw();
+                };
+                const handleMouseUp = () => {
+                    state.isDragging = false;
+                    if (state.cleanupMouseEvents) {
+                        state.cleanupMouseEvents();
+                        state.cleanupMouseEvents = null;
                     }
-                    else {
-                        state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
+                    updateSingleValue(state.singleValue, false);
+                    if (finalValueDisplay === 'auto') {
+                        m.redraw();
                     }
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (state.isOpen) {
-                        state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                };
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+                state.cleanupMouseEvents = () => {
+                    document.removeEventListener('mousemove', handleMouseMove);
+                    document.removeEventListener('mouseup', handleMouseUp);
+                };
+            };
+            const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+            return m('.input-field', { className: cn, style }, [
+                iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                m('input[type=range]', {
+                    id,
+                    value: state.singleValue,
+                    min,
+                    max,
+                    step,
+                    style: { display: 'none' },
+                    disabled,
+                    tabindex: -1,
+                }),
+                m('div', { class: fieldClass, style: containerStyle }, [
+                    m(`.single-range-slider.${orientation}`, {
+                        tabindex: disabled ? -1 : 0,
+                        role: 'slider',
+                        'aria-valuemin': min,
+                        'aria-valuemax': max,
+                        'aria-valuenow': state.singleValue,
+                        'aria-label': label || 'Range slider',
+                        onclick: (e) => {
+                            if (disabled)
+                                return;
+                            const container = e.currentTarget;
+                            const rect = container.getBoundingClientRect();
+                            const value = positionToValue(e, rect, min, max, step, vertical);
+                            updateSingleValue(value, false);
+                            e.currentTarget.focus();
+                        },
+                        onkeydown: (e) => {
+                            if (disabled)
+                                return;
+                            const currentValue = state.singleValue;
+                            const newValue = handleKeyboardNavigation(e.key, currentValue, min, max, step);
+                            if (newValue !== null) {
+                                e.preventDefault();
+                                updateSingleValue(newValue, false);
+                            }
+                        },
+                    }, [
+                        m(`.track.${orientation}`),
+                        m(`.range-progress.${orientation}`, { style: progressStyle }),
+                        m(`.thumb.${orientation}`, { style: thumbStyle, onmousedown: handleMouseDown }, m(RangeTooltip, {
+                            value: state.singleValue,
+                            position: tooltipPosition,
+                            show: finalValueDisplay === 'always' || (finalValueDisplay === 'auto' && state.isDragging),
+                        })),
+                    ]),
+                ]),
+                label ? m(Label, { label, id, isMandatory, isActive: true }) : null,
+                helperText ? m(HelperText, { helperText }) : null,
+            ]);
+        },
+    };
+    // Double Range Slider Component
+    const DoubleRangeSlider = {
+        oninit({ state }) {
+            if (!state.componentInitialized) {
+                state.componentInitialized = true;
+            }
+        },
+        onremove({ state }) {
+            if (state.cleanupMouseEvents) {
+                state.cleanupMouseEvents();
+                state.cleanupMouseEvents = null;
+            }
+        },
+        view({ attrs, state, }) {
+            const { cn, style, iconName, id, label, isMandatory, helperText, min = 0, max = 100, step = 1, vertical = false, showValue = false, valueDisplay, height = '200px', disabled = false, } = attrs;
+            const finalValueDisplay = valueDisplay || (showValue ? 'always' : 'none');
+            initRangeState(state, attrs);
+            const minPercentage = getPercentage(state.rangeMinValue, min, max);
+            const maxPercentage = getPercentage(state.rangeMaxValue, min, max);
+            const containerStyle = vertical ? { height } : {};
+            const orientation = vertical ? 'vertical' : 'horizontal';
+            const rangeStyle = vertical
+                ? {
+                    bottom: `${minPercentage}%`,
+                    height: `${maxPercentage - minPercentage}%`,
+                }
+                : {
+                    left: `${minPercentage}%`,
+                    width: `${maxPercentage - minPercentage}%`,
+                };
+            const createThumbStyle = (percentage, isActive) => vertical
+                ? {
+                    bottom: `${percentage}%`,
+                    zIndex: isActive ? 10 : 5,
+                }
+                : {
+                    left: `${percentage}%`,
+                    zIndex: isActive ? 10 : 5,
+                };
+            const handleMouseDown = (thumb) => (e) => {
+                if (disabled)
+                    return;
+                e.preventDefault();
+                state.isDragging = true;
+                state.activeThumb = thumb;
+                if (finalValueDisplay === 'auto') {
+                    m.redraw();
+                }
+                const thumbElement = e.currentTarget;
+                const container = thumbElement.parentElement;
+                if (!container)
+                    return;
+                const handleMouseMove = (e) => {
+                    if (!state.isDragging || !container)
+                        return;
+                    const rect = container.getBoundingClientRect();
+                    const steppedValue = positionToValue(e, rect, min, max, step, vertical);
+                    if (thumb === 'min') {
+                        updateRangeValues(Math.min(steppedValue, state.rangeMaxValue), state.rangeMaxValue, attrs, state, true);
                     }
-                    break;
-                case 'Enter':
-                case ' ':
-                    e.preventDefault();
-                    if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
-                        const selectedItem = availableItems[state.focusedIndex];
-                        const value = (selectedItem.id || selectedItem.label);
-                        state.initialValue = value;
-                        state.isOpen = false;
-                        state.focusedIndex = -1;
-                        if (onchange)
-                            onchange(value);
+                    else {
+                        updateRangeValues(state.rangeMinValue, Math.max(steppedValue, state.rangeMinValue), attrs, state, true);
                     }
-                    else if (!state.isOpen) {
-                        state.isOpen = true;
-                        state.focusedIndex = 0;
+                    m.redraw();
+                };
+                const handleMouseUp = () => {
+                    state.isDragging = false;
+                    state.activeThumb = null;
+                    if (state.cleanupMouseEvents) {
+                        state.cleanupMouseEvents();
+                        state.cleanupMouseEvents = null;
                     }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    state.isOpen = false;
-                    state.focusedIndex = -1;
-                    break;
-            }
-        };
-        return {
-            oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
-                state.id = id;
-                state.initialValue = initialValue || checkedId;
-                // Mithril will handle click events through the component structure
-            },
-            view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
-                const { initialValue } = state;
-                const selectedItem = initialValue
-                    ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
-                    : undefined;
-                const title = selectedItem ? selectedItem.label : label || 'Select';
-                const availableItems = items.filter((item) => !item.divider && !item.disabled);
-                return m('.dropdown-wrapper.input-field', { className, key, style }, [
-                    iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                    m(HelperText, { helperText }),
-                    m('.select-wrapper', {
-                        onclick: disabled
-                            ? undefined
-                            : () => {
-                                state.isOpen = !state.isOpen;
-                                state.focusedIndex = state.isOpen ? 0 : -1;
-                            },
-                        onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
-                        tabindex: disabled ? -1 : 0,
-                        'aria-expanded': state.isOpen ? 'true' : 'false',
-                        'aria-haspopup': 'listbox',
-                        role: 'combobox',
+                    updateRangeValues(state.rangeMinValue, state.rangeMaxValue, attrs, state, false);
+                    if (finalValueDisplay === 'auto') {
+                        m.redraw();
+                    }
+                };
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+                state.cleanupMouseEvents = () => {
+                    document.removeEventListener('mousemove', handleMouseMove);
+                    document.removeEventListener('mouseup', handleMouseUp);
+                };
+            };
+            const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+            return m('.input-field', { className: cn, style }, [
+                iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                m('input[type=range]', {
+                    id,
+                    value: state.rangeMinValue,
+                    min,
+                    max,
+                    step,
+                    style: { display: 'none' },
+                    disabled,
+                    tabindex: -1,
+                }),
+                m('input[type=range]', {
+                    id: `${id}_max`,
+                    value: state.rangeMaxValue,
+                    min,
+                    max,
+                    step,
+                    style: { display: 'none' },
+                    disabled,
+                    tabindex: -1,
+                }),
+                m(`div`, { className: fieldClass }, [
+                    m(`.double-range-slider.${orientation}`, {
+                        style: containerStyle,
+                        onclick: (e) => {
+                            if (disabled)
+                                return;
+                            const container = e.currentTarget;
+                            const rect = container.getBoundingClientRect();
+                            const steppedValue = positionToValue(e, rect, min, max, step, vertical);
+                            const distToMin = Math.abs(steppedValue - state.rangeMinValue);
+                            const distToMax = Math.abs(steppedValue - state.rangeMaxValue);
+                            if (distToMin <= distToMax) {
+                                updateRangeValues(Math.min(steppedValue, state.rangeMaxValue), state.rangeMaxValue, attrs, state, false);
+                                state.activeThumb = 'min';
+                                const minThumb = container.querySelector('.thumb.min-thumb');
+                                if (minThumb)
+                                    minThumb.focus();
+                            }
+                            else {
+                                updateRangeValues(state.rangeMinValue, Math.max(steppedValue, state.rangeMinValue), attrs, state, false);
+                                state.activeThumb = 'max';
+                                const maxThumb = container.querySelector('.thumb.max-thumb');
+                                if (maxThumb)
+                                    maxThumb.focus();
+                            }
+                        },
                     }, [
-                        m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
-                            id: state.id,
-                            value: title,
-                            oncreate: ({ dom }) => {
-                                state.inputRef = dom;
-                            },
+                        m(`.track.${orientation}`),
+                        m(`.range.${orientation}`, { style: rangeStyle }),
+                        // Min thumb
+                        m(`.thumb.${orientation}.min-thumb${state.activeThumb === 'min' ? '.active' : ''}`, {
+                            style: createThumbStyle(minPercentage, state.activeThumb === 'min'),
+                            tabindex: disabled ? -1 : 0,
+                            role: 'slider',
+                            'aria-valuemin': min,
+                            'aria-valuemax': state.rangeMaxValue,
+                            'aria-valuenow': state.rangeMinValue,
+                            'aria-label': `Minimum value: ${state.rangeMinValue}`,
+                            'aria-orientation': vertical ? 'vertical' : 'horizontal',
+                            onmousedown: handleMouseDown('min'),
                             onclick: (e) => {
-                                e.preventDefault();
                                 e.stopPropagation();
-                                if (!disabled) {
-                                    state.isOpen = !state.isOpen;
-                                    state.focusedIndex = state.isOpen ? 0 : -1;
-                                }
+                                state.activeThumb = 'min';
+                                e.currentTarget.focus();
                             },
-                        }),
-                        // Dropdown Menu using Select component's positioning logic
-                        state.isOpen &&
-                            m('ul.dropdown-content.select-dropdown', {
-                                tabindex: 0,
-                                role: 'listbox',
-                                'aria-labelledby': state.id,
-                                oncreate: ({ dom }) => {
-                                    state.dropdownRef = dom;
-                                },
-                                onremove: () => {
-                                    state.dropdownRef = null;
-                                },
-                                style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
-                                    // Convert dropdown items to format expected by getDropdownStyles
-                                    group: undefined }))), true),
-                            }, items.map((item, index) => {
-                                if (item.divider) {
-                                    return m('li.divider', {
-                                        key: `divider-${index}`,
-                                    });
+                            onfocus: () => {
+                                state.activeThumb = 'min';
+                            },
+                            onkeydown: (e) => {
+                                if (disabled)
+                                    return;
+                                const currentValue = state.rangeMinValue;
+                                const newValue = handleKeyboardNavigation(e.key, currentValue, min, max, step);
+                                if (newValue !== null) {
+                                    e.preventDefault();
+                                    const constrainedValue = Math.min(newValue, state.rangeMaxValue);
+                                    updateRangeValues(constrainedValue, state.rangeMaxValue, attrs, state, false);
                                 }
-                                const itemIndex = availableItems.indexOf(item);
-                                const isFocused = itemIndex === state.focusedIndex;
-                                return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
-                                        item.disabled ? 'disabled' : '',
-                                        isFocused ? 'focused' : '',
-                                        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' ') }, (item.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                            const value = (item.id || item.label);
-                                            state.initialValue = value;
-                                            state.isOpen = false;
-                                            state.focusedIndex = -1;
-                                            if (onchange)
-                                                onchange(value);
-                                        },
-                                    })), m('span', {
-                                    style: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        padding: '14px 16px',
-                                    },
-                                }, [
-                                    item.iconName
-                                        ? m('i.material-icons', {
-                                            style: { marginRight: '32px' },
-                                        }, item.iconName)
-                                        : undefined,
-                                    item.label,
-                                ]));
-                            })),
-                        m(MaterialIcon, {
-                            name: 'caret',
-                            direction: 'down',
-                            class: 'caret',
-                        }),
-                    ]),
-                ]);
-            },
-        };
-    };
-
-    /**
-     * Floating Action Button
-     */
-    const FloatingActionButton = () => {
-        const state = {
-            isOpen: false,
-        };
-        const handleClickOutside = (e) => {
-            const target = e.target;
-            if (!target.closest('.fixed-action-btn')) {
-                state.isOpen = false;
-            }
-        };
-        return {
-            oncreate: () => {
-                document.addEventListener('click', handleClickOutside);
-            },
-            onremove: () => {
-                document.removeEventListener('click', handleClickOutside);
-            },
-            view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
-                ? 'position: absolute; display: inline-block; left: 24px;'
-                : position === 'right' || position === 'inline-right'
-                    ? 'position: absolute; display: inline-block; right: 24px;'
-                    : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
-                const fabClasses = [
-                    'fixed-action-btn',
-                    direction ? `direction-${direction}` : '',
-                    state.isOpen ? 'active' : '',
-                    // hoverEnabled ? 'hover-enabled' : '',
-                ]
-                    .filter(Boolean)
-                    .join(' ');
-                return m('div', {
-                    style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
-                }, m(`.${fabClasses}`, {
-                    style,
-                    onclick: (e) => {
-                        e.stopPropagation();
-                        if (buttons && buttons.length > 0) {
-                            state.isOpen = !state.isOpen;
-                        }
-                    },
-                    onmouseover: hoverEnabled
-                        ? () => {
-                            if (buttons && buttons.length > 0) {
-                                state.isOpen = true;
-                            }
-                        }
-                        : undefined,
-                    onmouseleave: hoverEnabled
-                        ? () => {
-                            state.isOpen = false;
-                        }
-                        : undefined,
-                }, [
-                    m('a.btn-floating.btn-large', {
-                        className,
-                    }, m('i.material-icons', { className: iconClass }, iconName)),
-                    buttons &&
-                        buttons.length > 0 &&
-                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
-                            style: {
-                                opacity: state.isOpen ? '1' : '0',
-                                transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
-                                transition: `all 0.3s ease ${index * 40}ms`,
                             },
+                        }, m(DoubleRangeTooltip, {
+                            value: state.rangeMinValue,
+                            orientation,
+                            show: finalValueDisplay === 'always' ||
+                                (finalValueDisplay === 'auto' && state.isDragging && state.activeThumb === 'min'),
+                        })),
+                        // Max thumb
+                        m(`.thumb.${orientation}.max-thumb${state.activeThumb === 'max' ? '.active' : ''}`, {
+                            style: createThumbStyle(maxPercentage, state.activeThumb === 'max'),
+                            tabindex: disabled ? -1 : 0,
+                            role: 'slider',
+                            'aria-valuemin': state.rangeMinValue,
+                            'aria-valuemax': max,
+                            'aria-valuenow': state.rangeMaxValue,
+                            'aria-label': `Maximum value: ${state.rangeMaxValue}`,
+                            'aria-orientation': vertical ? 'vertical' : 'horizontal',
+                            onmousedown: handleMouseDown('max'),
                             onclick: (e) => {
                                 e.stopPropagation();
-                                if (button.onClick)
-                                    button.onClick(e);
+                                state.activeThumb = 'max';
+                                e.currentTarget.focus();
                             },
-                        }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
-                ]));
-            },
-        };
+                            onfocus: () => {
+                                state.activeThumb = 'max';
+                            },
+                            onkeydown: (e) => {
+                                if (disabled)
+                                    return;
+                                const currentValue = state.rangeMaxValue;
+                                const newValue = handleKeyboardNavigation(e.key, currentValue, min, max, step);
+                                if (newValue !== null) {
+                                    e.preventDefault();
+                                    const constrainedValue = Math.max(newValue, state.rangeMinValue);
+                                    updateRangeValues(state.rangeMinValue, constrainedValue, attrs, state, false);
+                                }
+                            },
+                        }, m(DoubleRangeTooltip, {
+                            value: state.rangeMaxValue,
+                            orientation,
+                            show: finalValueDisplay === 'always' ||
+                                (finalValueDisplay === 'auto' && state.isDragging && state.activeThumb === 'max'),
+                        })),
+                    ]),
+                ]),
+                label ? m(Label, { label, id, isMandatory, isActive: true }) : null,
+                helperText ? m(HelperText, { helperText }) : null,
+            ]);
+        },
     };
 
     /** Character counter component that tracks text length against maxLength */
@@ -2418,6 +2893,12 @@
             isValid: true,
             active: false,
             inputElement: null,
+            // Range-specific state
+            rangeMinValue: undefined,
+            rangeMaxValue: undefined,
+            singleValue: undefined,
+            isDragging: false,
+            activeThumb: null,
         };
         // let labelManager: { updateLabelState: () => void; cleanup: () => void } | null = null;
         // let lengthUpdateHandler: (() => void) | null = null;
@@ -2443,18 +2924,39 @@
                 state.hasInteracted = length > 0;
             }
         };
+        // Range slider helper functions
+        // Range slider rendering functions are now in separate module
         return {
             view: ({ attrs }) => {
                 var _a;
                 const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
                 // const attributes = toAttrs(params);
-                const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
+                const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
                 const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
                     ? true
                     : false;
+                // Special rendering for minmax range sliders
+                if (type === 'range' && (attrs.minmax || attrs.valueDisplay)) {
+                    return m(attrs.minmax ? DoubleRangeSlider : SingleRangeSlider, Object.assign(Object.assign({}, attrs), { state,
+                        cn,
+                        style,
+                        iconName,
+                        id,
+                        label,
+                        isMandatory,
+                        helperText }));
+                }
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                    m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id, 
+                    m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
+                        placeholder, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
+                            ? {
+                                height: attrs.height || '200px',
+                                width: '6px',
+                                writingMode: 'vertical-lr',
+                                direction: 'rtl',
+                            }
+                            : undefined, 
                         // attributes,
                         oncreate: ({ dom }) => {
                             const input = (state.inputElement = dom);
@@ -2470,7 +2972,7 @@
                                 state.currentLength = input.value.length; // Initial count
                             }
                             // Range input functionality
-                            if (type === 'range') {
+                            if (type === 'range' && !attrs.minmax) {
                                 const updateThumb = () => {
                                     const value = input.value;
                                     const min = input.min || '0';
@@ -2667,83 +3169,1010 @@
         };
     };
 
-    /**
-     * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
-     * No MaterializeCSS dependencies
-     */
-    const MaterialBox = () => {
-        const state = {
-            isOpen: false,
-            originalImage: null,
-            overlay: null,
-            overlayImage: null,
+    /** Component to show a check box */
+    const InputCheckbox = () => {
+        return {
+            view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
+                const checkboxId = inputId || uniqueId();
+                return m(`p`, { className, style }, m('label', { for: checkboxId }, [
+                    m('input[type=checkbox][tabindex=0]', {
+                        id: checkboxId,
+                        checked,
+                        disabled,
+                        onclick: onchange
+                            ? (e) => {
+                                if (e.target && typeof e.target.checked !== 'undefined') {
+                                    onchange(e.target.checked);
+                                }
+                            }
+                            : undefined,
+                    }),
+                    label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
+                ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
+            },
         };
-        const openBox = (img, attrs) => {
-            if (state.isOpen)
-                return;
-            state.isOpen = true;
-            state.originalImage = img;
-            if (attrs.onOpenStart)
-                attrs.onOpenStart();
-            // 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;
-    `;
-            // Create enlarged image
-            const enlargedImg = document.createElement('img');
-            enlargedImg.src = img.src;
-            enlargedImg.alt = img.alt || '';
-            enlargedImg.className = 'materialbox-image';
-            // Get original image dimensions and position
-            const imgRect = img.getBoundingClientRect();
-            const windowWidth = window.innerWidth;
-            const windowHeight = window.innerHeight;
-            // Calculate final size maintaining aspect ratio
-            const aspectRatio = img.naturalWidth / img.naturalHeight;
-            const maxWidth = windowWidth * 0.9;
-            const maxHeight = windowHeight * 0.9;
-            let finalWidth = maxWidth;
-            let finalHeight = maxWidth / aspectRatio;
-            if (finalHeight > maxHeight) {
-                finalHeight = maxHeight;
-                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;
-    `;
-            // 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;
+    };
+    /** A list of checkboxes */
+    const Options = () => {
+        const state = {};
+        const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
+        const selectAll = (options, callback) => {
+            const allIds = options.map((option) => option.id);
+            state.checkedIds = [...allIds];
+            if (callback)
+                callback(allIds);
+        };
+        const selectNone = (callback) => {
+            state.checkedIds = [];
+            if (callback)
+                callback([]);
+        };
+        return {
+            oninit: ({ attrs: { initialValue, checkedId, id } }) => {
+                const iv = checkedId || initialValue;
+                state.checkedId = checkedId;
+                state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
+                state.componentId = id || uniqueId();
+            },
+            view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
+                const onchange = callback
+                    ? (propId, checked) => {
+                        const checkedIds = state.checkedIds.filter((i) => i !== propId);
+                        if (checked) {
+                            checkedIds.push(propId);
+                        }
+                        state.checkedIds = checkedIds;
+                        callback(checkedIds);
+                    }
+                    : undefined;
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
+                const optionsContent = layout === 'horizontal'
+                    ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
+                        disabled: disabled || option.disabled,
+                        label: option.label,
+                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                        className: option.className || checkboxClass,
+                        checked: isChecked(option.id),
+                        description: option.description,
+                        inputId: `${state.componentId}-${option.id}`,
+                    })))
+                    : options.map((option) => m(InputCheckbox, {
+                        disabled: disabled || option.disabled,
+                        label: option.label,
+                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                        className: option.className || checkboxClass,
+                        checked: isChecked(option.id),
+                        description: option.description,
+                        inputId: `${state.componentId}-${option.id}`,
+                    }));
+                return m('div', { id: state.componentId, className: cn, style }, [
+                    label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
+                    showSelectAll &&
+                        m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
+                            m('a', {
+                                href: '#',
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    selectAll(options, callback);
+                                },
+                                style: 'margin-right: 15px;',
+                            }, 'Select All'),
+                            m('a', {
+                                href: '#',
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    selectNone(callback);
+                                },
+                            }, 'Select None'),
+                        ]),
+                    description && m(HelperText, { helperText: description }),
+                    m('form', { action: '#' }, optionsContent),
+                ]);
+            },
+        };
+    };
+
+    const GlobalSearch = () => {
+        return {
+            view: ({ attrs }) => {
+                const { searchPlaceholder, onSearch, i18n } = attrs;
+                return m('.datatable-global-search', m(TextInput, {
+                    className: 'datatable-search',
+                    label: (i18n === null || i18n === void 0 ? void 0 : i18n.search) || 'Search',
+                    placeholder: searchPlaceholder || (i18n === null || i18n === void 0 ? void 0 : i18n.searchPlaceholder) || 'Search table...',
+                    oninput: onSearch,
+                }));
+            },
+        };
+    };
+    const TableHeader = () => {
+        return {
+            view: ({ attrs }) => {
+                const { columns, selection, sort, allSelected, helpers } = attrs;
+                return m('thead', m('tr', [
+                    // Selection column header
+                    ...(selection && selection.mode !== 'none'
+                        ? [
+                            m('th.selection-checkbox', [
+                                selection.mode === 'multiple' &&
+                                    m(InputCheckbox, {
+                                        checked: allSelected,
+                                        onchange: helpers.handleSelectAll,
+                                        className: '',
+                                    }),
+                            ]),
+                        ]
+                        : []),
+                    // Regular columns
+                    ...columns.map((column) => {
+                        const isSorted = (sort === null || sort === void 0 ? void 0 : sort.column) === column.key;
+                        const sortDirection = isSorted ? sort.direction : null;
+                        return m('th', {
+                            class: [
+                                column.headerClassName,
+                                column.sortable ? 'sortable' : '',
+                                isSorted ? `sorted-${sortDirection}` : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' '),
+                            style: column.width ? { width: column.width } : undefined,
+                            onclick: column.sortable ? () => helpers.handleSort(column.key) : undefined,
+                        }, [
+                            column.title,
+                            column.sortable &&
+                                m('.sort-indicators', [
+                                    m('span.sort-icon.sort-asc', {
+                                        className: isSorted && sortDirection === 'asc' ? 'active' : '',
+                                    }, '▲'),
+                                    m('span.sort-icon.sort-desc', {
+                                        className: isSorted && sortDirection === 'desc' ? 'active' : '',
+                                    }, '▼'),
+                                ]),
+                        ]);
+                    }),
+                ]));
+            },
+        };
+    };
+    const TableRow = () => {
+        return {
+            view: ({ attrs }) => {
+                const { row, index, columns, selection, onRowClick, onRowDoubleClick, getRowClassName, helpers, data } = attrs;
+                // Calculate the original data index for the row key
+                const originalIndex = data.findIndex((originalRow) => originalRow === row);
+                const rowKey = (selection === null || selection === void 0 ? void 0 : selection.getRowKey(row, originalIndex)) || String(originalIndex);
+                const isSelected = (selection === null || selection === void 0 ? void 0 : selection.selectedKeys.includes(rowKey)) || false;
+                return m('tr', {
+                    class: [getRowClassName ? getRowClassName(row, index) : '', isSelected ? 'selected' : '']
+                        .filter(Boolean)
+                        .join(' ') || undefined,
+                    onclick: onRowClick ? (e) => onRowClick(row, index, e) : undefined,
+                    ondblclick: onRowDoubleClick ? (e) => onRowDoubleClick(row, index, e) : undefined,
+                }, [
+                    // Selection column
+                    selection &&
+                        selection.mode !== 'none' &&
+                        m('td.selection-checkbox', [
+                            m(InputCheckbox, {
+                                checked: isSelected,
+                                onchange: (checked) => helpers.handleSelectionChange(rowKey, checked),
+                                className: '',
+                            }),
+                        ]),
+                    columns.map((column) => {
+                        const value = helpers.getCellValue(row, column);
+                        let cellContent;
+                        if (column.cellRenderer) {
+                            cellContent = m(column.cellRenderer, {
+                                value,
+                                row,
+                                index,
+                                column,
+                            });
+                        }
+                        else if (column.render) {
+                            // Backward compatibility with deprecated render function
+                            cellContent = column.render(value, row, index);
+                        }
+                        else {
+                            cellContent = String(value || '');
+                        }
+                        return m('td', {
+                            class: [column.className, column.align ? `align-${column.align}` : ''].filter(Boolean).join(' ') ||
+                                undefined,
+                        }, cellContent);
+                    }),
+                ]);
+            },
+        };
+    };
+    /**
+     * Standalone Pagination Controls component
+     *
+     * Provides navigation controls for paginated data with customizable text labels.
+     * Includes first page, previous page, next page, last page buttons and page info display.
+     * Can be used independently of DataTable for any paginated content.
+     *
+     * @example
+     * ```typescript
+     * m(PaginationControls, {
+     *   pagination: { page: 0, pageSize: 10, total: 100 },
+     *   onPaginationChange: (newPagination) => console.log('Page changed:', newPagination),
+     *   i18n: { showing: 'Showing', to: 'to', of: 'of', entries: 'entries', page: 'Page' }
+     * })
+     * ```
+     */
+    const PaginationControls = () => {
+        return {
+            view: ({ attrs }) => {
+                const { pagination, onPaginationChange, i18n } = attrs;
+                if (!pagination)
+                    return null;
+                const { page, pageSize, total } = pagination;
+                const totalPages = Math.ceil(total / pageSize);
+                const startItem = page * pageSize + 1;
+                const endItem = Math.min((page + 1) * pageSize, total);
+                const showingText = (i18n === null || i18n === void 0 ? void 0 : i18n.showing) || 'Showing';
+                const toText = (i18n === null || i18n === void 0 ? void 0 : i18n.to) || 'to';
+                const ofText = (i18n === null || i18n === void 0 ? void 0 : i18n.of) || 'of';
+                const entriesText = (i18n === null || i18n === void 0 ? void 0 : i18n.entries) || 'entries';
+                const pageText = (i18n === null || i18n === void 0 ? void 0 : i18n.page) || 'Page';
+                return m('.datatable-pagination', [
+                    m('.pagination-info', `${showingText} ${startItem} ${toText} ${endItem} ${ofText} ${total} ${entriesText}`),
+                    m('.pagination-controls', [
+                        m('button.btn-flat', {
+                            disabled: page === 0,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: 0 })),
+                        }, '⏮'),
+                        m('button.btn-flat', {
+                            disabled: page === 0,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: page - 1 })),
+                        }, '◀'),
+                        m('span.page-info', `${pageText} ${page + 1} ${ofText} ${totalPages}`),
+                        m('button.btn-flat', {
+                            disabled: page >= totalPages - 1,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: page + 1 })),
+                        }, '▶'),
+                        m('button.btn-flat', {
+                            disabled: page >= totalPages - 1,
+                            onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: totalPages - 1 })),
+                        }, '⏭'),
+                    ]),
+                ]);
+            },
+        };
+    };
+    const TableContent = () => {
+        return {
+            view: ({ attrs: contentAttrs }) => {
+                const { processedData, tableClasses, columns, selection, internalSort, allSelected, someSelected, helpers, onRowClick, onRowDoubleClick, getRowClassName, data, } = contentAttrs;
+                return m('table', {
+                    class: tableClasses,
+                }, m(TableHeader(), {
+                    columns,
+                    selection,
+                    sort: internalSort,
+                    allSelected,
+                    someSelected,
+                    helpers,
+                }), m('tbody', processedData.map((row, index) => m(TableRow(), {
+                    key: (selection === null || selection === void 0 ? void 0 : selection.getRowKey(row, data.findIndex((originalRow) => originalRow === row))) || index,
+                    row,
+                    index,
+                    columns,
+                    selection,
+                    onRowClick,
+                    onRowDoubleClick,
+                    getRowClassName,
+                    helpers,
+                    data,
+                }))));
+            },
+        };
+    };
+    /**
+     * A comprehensive data table component with sorting, filtering, pagination, and selection capabilities.
+     *
+     * @template T The type of data objects displayed in each row
+     *
+     * @description
+     * The DataTable component provides a feature-rich interface for displaying and interacting with tabular data.
+     * It supports both controlled and uncontrolled modes for all interactive features.
+     *
+     * **Key Features:**
+     * - Sorting: Click column headers to sort data ascending/descending
+     * - Filtering: Global search across filterable columns
+     * - Pagination: Navigate through large datasets with customizable page sizes
+     * - Selection: Single or multiple row selection with callbacks
+     * - Custom rendering: Use cellRenderer for complex cell content
+     * - Responsive: Adapts to different screen sizes
+     * - Internationalization: Customize all UI text
+     * - Accessibility: Proper ARIA attributes and keyboard navigation
+     *
+     * @example Basic usage
+     * ```typescript
+     * interface User { id: number; name: string; email: string; }
+     * const users: User[] = [...];
+     * const columns: DataTableColumn<User>[] = [
+     *   { key: 'name', title: 'Name', field: 'name', sortable: true, filterable: true },
+     *   { key: 'email', title: 'Email', field: 'email', sortable: true, filterable: true }
+     * ];
+     *
+     * return m(DataTable<User>, { data: users, columns });
+     * ```
+     *
+     * @example Advanced usage with all features
+     * ```typescript
+     * return m(DataTable<User>, {
+     *   data: users,
+     *   columns,
+     *   title: 'User Management',
+     *   striped: true,
+     *   hoverable: true,
+     *   height: 400,
+     *
+     *   // Pagination
+     *   pagination: { page: 0, pageSize: 10, total: users.length },
+     *   onPaginationChange: (pagination) => console.log('Page changed:', pagination),
+     *
+     *   // Selection
+     *   selection: {
+     *     mode: 'multiple',
+     *     selectedKeys: [],
+     *     getRowKey: (user) => String(user.id),
+     *     onSelectionChange: (keys, selectedUsers) => console.log('Selection:', selectedUsers)
+     *   },
+     *
+     *   // Search
+     *   enableGlobalSearch: true,
+     *   searchPlaceholder: 'Search users...',
+     *
+     *   // Events
+     *   onRowClick: (user, index, event) => console.log('Clicked:', user),
+     *   onRowDoubleClick: (user) => editUser(user),
+     *
+     *   // Styling
+     *   getRowClassName: (user) => user.active ? '' : 'inactive-row'
+     * });
+     * ```
+     *
+     * @returns A Mithril component that renders the data table
+     */
+    const DataTable = () => {
+        const state = {
+            internalSort: undefined,
+            internalFilter: undefined,
+            internalPagination: undefined,
+            processedData: [],
+            tableId: '',
+            // Performance optimization caches
+            lastProcessedHash: ''};
+        // Helper functions
+        const quickDataHash = (data) => {
+            if (data.length === 0)
+                return '0';
+            if (data.length === 1)
+                return '1';
+            // Sample first, middle, and last items for quick hash
+            const first = JSON.stringify(data[0]);
+            const middle = data.length > 2 ? JSON.stringify(data[Math.floor(data.length / 2)]) : '';
+            const last = JSON.stringify(data[data.length - 1]);
+            return `${data.length}-${first.length}-${middle.length}-${last.length}`;
+        };
+        const getDataHash = (attrs) => {
+            const { data, sort, filter, pagination } = attrs;
+            const { internalSort, internalFilter, internalPagination } = state;
+            const hashInputs = {
+                dataLength: data.length,
+                dataHash: quickDataHash(data),
+                sort: sort || internalSort,
+                filter: filter || internalFilter,
+                pagination: pagination || internalPagination,
+            };
+            return JSON.stringify(hashInputs);
+        };
+        const getCellValue = (row, column) => {
+            if (column.field) {
+                return row[column.field];
+            }
+            return row;
+        };
+        const applyFiltering = (data, filter, columns) => {
+            var _a;
+            if (!filter.searchTerm && !filter.columnFilters)
+                return data;
+            const filterableColumns = columns.filter((col) => col.filterable);
+            if (filterableColumns.length === 0 && !filter.searchTerm)
+                return data;
+            const searchTerm = (_a = filter.searchTerm) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const hasColumnFilters = filter.columnFilters &&
+                Object.keys(filter.columnFilters).some((key) => {
+                    const value = filter.columnFilters[key];
+                    return value !== null && value !== undefined && value !== '';
+                });
+            return data.filter((row) => {
+                // Global search
+                if (searchTerm) {
+                    const matchesGlobal = filterableColumns.some((column) => {
+                        const value = getCellValue(row, column);
+                        if (value == null)
+                            return false;
+                        return String(value).toLowerCase().includes(searchTerm);
+                    });
+                    if (!matchesGlobal)
+                        return false;
+                }
+                // Column-specific filters
+                if (hasColumnFilters) {
+                    const matchesColumnFilters = Object.entries(filter.columnFilters).every(([columnKey, filterValue]) => {
+                        if (filterValue === null || filterValue === undefined || filterValue === '')
+                            return true;
+                        const column = columns.find((col) => col.key === columnKey);
+                        if (!column)
+                            return true;
+                        const value = getCellValue(row, column);
+                        if (value == null)
+                            return false;
+                        return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
+                    });
+                    if (!matchesColumnFilters)
+                        return false;
+                }
+                return true;
+            });
+        };
+        const applySorting = (data, sort, columns) => {
+            const column = columns.find((col) => col.key === sort.column);
+            if (!column || !column.sortable)
+                return data;
+            const multiplier = sort.direction === 'asc' ? 1 : -1;
+            return [...data].sort((a, b) => {
+                const aValue = getCellValue(a, column);
+                const bValue = getCellValue(b, column);
+                // Handle null/undefined values
+                if (aValue == null && bValue == null)
+                    return 0;
+                if (aValue == null)
+                    return -1 * multiplier;
+                if (bValue == null)
+                    return 1 * multiplier;
+                // Type-specific comparisons
+                const aType = typeof aValue;
+                const bType = typeof bValue;
+                if (aType === bType) {
+                    if (aType === 'number') {
+                        return (aValue - bValue) * multiplier;
+                    }
+                    if (aType === 'boolean') {
+                        return (aValue === bValue ? 0 : aValue ? 1 : -1) * multiplier;
+                    }
+                    if (aValue instanceof Date && bValue instanceof Date) {
+                        return (aValue.getTime() - bValue.getTime()) * multiplier;
+                    }
+                }
+                // Fallback to string comparison
+                return String(aValue).localeCompare(String(bValue)) * multiplier;
+            });
+        };
+        const processData = (attrs) => {
+            const { data } = attrs;
+            const { internalSort, internalFilter, internalPagination } = state;
+            let processedData = [...data];
+            // Apply filtering
+            if (internalFilter) {
+                processedData = applyFiltering(processedData, internalFilter, attrs.columns);
+            }
+            // Apply sorting
+            if (internalSort) {
+                processedData = applySorting(processedData, internalSort, attrs.columns);
+            }
+            // Update total count for pagination
+            if (internalPagination) {
+                state.internalPagination = Object.assign(Object.assign({}, internalPagination), { total: processedData.length });
+            }
+            // Apply pagination
+            if (internalPagination) {
+                const { page, pageSize } = internalPagination;
+                const start = page * pageSize;
+                const end = start + pageSize;
+                processedData = processedData.slice(start, end);
+            }
+            state.processedData = processedData;
+        };
+        // Create stable helper functions that don't get recreated on every render
+        const createHelpers = (attrs) => ({
+            getCellValue,
+            handleSort: (columnKey) => {
+                var _a;
+                const column = attrs.columns.find((col) => col.key === columnKey);
+                if (!column || !column.sortable)
+                    return;
+                const currentSort = state.internalSort;
+                let newSort;
+                if ((currentSort === null || currentSort === void 0 ? void 0 : currentSort.column) === columnKey) {
+                    // Toggle direction
+                    if (currentSort.direction === 'asc') {
+                        newSort = { column: columnKey, direction: 'desc' };
+                    }
+                    else {
+                        newSort = { column: columnKey, direction: 'asc' };
+                    }
+                }
+                else {
+                    // New column sort
+                    newSort = { column: columnKey, direction: 'asc' };
+                }
+                state.internalSort = newSort;
+                (_a = attrs.onSortChange) === null || _a === void 0 ? void 0 : _a.call(attrs, newSort);
+            },
+            handleGlobalSearch: (searchTerm) => {
+                var _a;
+                const newFilter = Object.assign(Object.assign({}, state.internalFilter), { searchTerm });
+                state.internalFilter = newFilter;
+                // Reset pagination to first page when filtering
+                if (state.internalPagination) {
+                    state.internalPagination = Object.assign(Object.assign({}, state.internalPagination), { page: 0 });
+                }
+                (_a = attrs.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(attrs, newFilter);
+            },
+            handleSelectionChange: (rowKey, selected) => {
+                var _a, _b;
+                if (!attrs.selection)
+                    return;
+                let newSelectedKeys;
+                if (attrs.selection.mode === 'single') {
+                    newSelectedKeys = selected ? [rowKey] : [];
+                }
+                else if (attrs.selection.mode === 'multiple') {
+                    if (selected) {
+                        newSelectedKeys = [...attrs.selection.selectedKeys, rowKey];
+                    }
+                    else {
+                        newSelectedKeys = attrs.selection.selectedKeys.filter((key) => key !== rowKey);
+                    }
+                }
+                else {
+                    return; // No selection mode
+                }
+                // Get selected rows
+                const selectedRows = attrs.data.filter((row, index) => {
+                    const key = attrs.selection.getRowKey(row, index);
+                    return newSelectedKeys.includes(key);
+                });
+                (_b = (_a = attrs.selection).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, newSelectedKeys, selectedRows);
+            },
+            handleSelectAll: (selected) => {
+                var _a, _b;
+                if (!attrs.selection || attrs.selection.mode !== 'multiple')
+                    return;
+                let newSelectedKeys;
+                if (selected) {
+                    // Select all visible rows
+                    newSelectedKeys = state.processedData.map((row) => {
+                        const originalIndex = attrs.data.findIndex((originalRow) => originalRow === row);
+                        return attrs.selection.getRowKey(row, originalIndex);
+                    });
+                }
+                else {
+                    newSelectedKeys = [];
+                }
+                const selectedRows = attrs.data.filter((row, index) => {
+                    const key = attrs.selection.getRowKey(row, index);
+                    return newSelectedKeys.includes(key);
+                });
+                (_b = (_a = attrs.selection).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, newSelectedKeys, selectedRows);
+            },
+        });
+        return {
+            oninit(vnodeInit) {
+                const { sort, filter, pagination } = vnodeInit.attrs;
+                state.tableId = uniqueId();
+                state.internalSort = sort || undefined;
+                state.internalFilter = filter || { searchTerm: '', columnFilters: {} };
+                state.internalPagination = pagination || undefined;
+                processData(vnodeInit.attrs);
+            },
+            onbeforeupdate(vnodeUpdate) {
+                // Only reprocess data if inputs have changed
+                const currentHash = getDataHash(vnodeUpdate.attrs);
+                if (currentHash !== state.lastProcessedHash) {
+                    processData(vnodeUpdate.attrs);
+                    state.lastProcessedHash = currentHash;
+                }
+            },
+            view(vnodeView) {
+                const attrs = vnodeView.attrs;
+                const { loading, emptyMessage, striped, hoverable, responsive, centered, className, id, title, height, enableGlobalSearch, searchPlaceholder, selection, columns, onRowClick, onRowDoubleClick, getRowClassName, data, onPaginationChange, i18n, } = attrs;
+                const { processedData, tableId, internalSort, internalPagination } = state;
+                if (loading) {
+                    return m('.datatable-loading', [
+                        m('.preloader-wrapper.small.active', m('.spinner-layer.spinner-blue-only', m('.circle-clipper.left', m('.circle')))),
+                        m('p', (i18n === null || i18n === void 0 ? void 0 : i18n.loading) || 'Loading...'),
+                    ]);
+                }
+                // Create stable helpers object using the factory function
+                const helpers = createHelpers(attrs);
+                // Calculate selection state for "select all" checkbox
+                let allSelected = false;
+                let someSelected = false;
+                if (selection && selection.mode === 'multiple') {
+                    const visibleRowKeys = processedData.map((row) => {
+                        const originalIndex = data.findIndex((originalRow) => originalRow === row);
+                        return selection.getRowKey(row, originalIndex);
+                    });
+                    const selectedVisibleKeys = visibleRowKeys.filter((key) => selection.selectedKeys.includes(key));
+                    allSelected = visibleRowKeys.length > 0 && selectedVisibleKeys.length === visibleRowKeys.length;
+                    someSelected = selectedVisibleKeys.length > 0 && selectedVisibleKeys.length < visibleRowKeys.length;
+                }
+                const tableClasses = [
+                    'datatable',
+                    striped ? 'striped' : '',
+                    hoverable ? 'highlight' : '',
+                    responsive ? 'responsive-table' : '',
+                    centered ? 'centered' : '',
+                    className || '',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                return m('.datatable-container', {
+                    id: id || tableId,
+                }, title && m('h5.datatable-title', title), enableGlobalSearch &&
+                    m(GlobalSearch, {
+                        searchPlaceholder,
+                        onSearch: helpers.handleGlobalSearch,
+                        i18n,
+                    }), m('.datatable-wrapper', {
+                    style: {
+                        maxHeight: height ? `${height}px` : undefined,
+                        overflowY: height ? 'auto' : undefined,
+                    },
+                }, processedData.length === 0
+                    ? m('.datatable-empty', emptyMessage || (i18n === null || i18n === void 0 ? void 0 : i18n.noDataAvailable) || 'No data available')
+                    : m(TableContent(), {
+                        processedData,
+                        height,
+                        tableClasses,
+                        columns,
+                        selection,
+                        internalSort,
+                        allSelected,
+                        someSelected,
+                        helpers,
+                        onRowClick,
+                        onRowDoubleClick,
+                        getRowClassName,
+                        data,
+                    })), m(PaginationControls, {
+                    pagination: internalPagination,
+                    onPaginationChange: (pagination) => {
+                        state.internalPagination = pagination;
+                        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(pagination);
+                    },
+                    i18n,
+                }));
+            },
+        };
+    };
+
+    /** Pure TypeScript Dropdown component - no Materialize dependencies */
+    const Dropdown = () => {
+        const state = {
+            isOpen: false,
+            initialValue: undefined,
+            id: '',
+            focusedIndex: -1,
+            inputRef: null,
+            dropdownRef: null,
+        };
+        const handleKeyDown = (e, items, onchange) => {
+            const availableItems = items.filter((item) => !item.divider && !item.disabled);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    else {
+                        state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
+                    }
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (state.isOpen) {
+                        state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                    }
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
+                        const selectedItem = availableItems[state.focusedIndex];
+                        const value = (selectedItem.id || selectedItem.label);
+                        state.initialValue = value;
+                        state.isOpen = false;
+                        state.focusedIndex = -1;
+                        if (onchange)
+                            onchange(value);
+                    }
+                    else if (!state.isOpen) {
+                        state.isOpen = true;
+                        state.focusedIndex = 0;
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    state.isOpen = false;
+                    state.focusedIndex = -1;
+                    break;
+            }
+        };
+        return {
+            oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
+                state.id = id;
+                state.initialValue = initialValue || checkedId;
+                // Mithril will handle click events through the component structure
+            },
+            view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
+                const { initialValue } = state;
+                const selectedItem = initialValue
+                    ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
+                    : undefined;
+                const title = selectedItem ? selectedItem.label : label || 'Select';
+                const availableItems = items.filter((item) => !item.divider && !item.disabled);
+                return m('.dropdown-wrapper.input-field', { className, key, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                    m(HelperText, { helperText }),
+                    m('.select-wrapper', {
+                        onclick: disabled
+                            ? undefined
+                            : () => {
+                                state.isOpen = !state.isOpen;
+                                state.focusedIndex = state.isOpen ? 0 : -1;
+                            },
+                        onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
+                        tabindex: disabled ? -1 : 0,
+                        'aria-expanded': state.isOpen ? 'true' : 'false',
+                        'aria-haspopup': 'listbox',
+                        role: 'combobox',
+                    }, [
+                        m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
+                            id: state.id,
+                            value: title,
+                            oncreate: ({ dom }) => {
+                                state.inputRef = dom;
+                            },
+                            onclick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (!disabled) {
+                                    state.isOpen = !state.isOpen;
+                                    state.focusedIndex = state.isOpen ? 0 : -1;
+                                }
+                            },
+                        }),
+                        // Dropdown Menu using Select component's positioning logic
+                        state.isOpen &&
+                            m('ul.dropdown-content.select-dropdown', {
+                                tabindex: 0,
+                                role: 'listbox',
+                                'aria-labelledby': state.id,
+                                oncreate: ({ dom }) => {
+                                    state.dropdownRef = dom;
+                                },
+                                onremove: () => {
+                                    state.dropdownRef = null;
+                                },
+                                style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
+                                    // Convert dropdown items to format expected by getDropdownStyles
+                                    group: undefined }))), true),
+                            }, items.map((item, index) => {
+                                if (item.divider) {
+                                    return m('li.divider', {
+                                        key: `divider-${index}`,
+                                    });
+                                }
+                                const itemIndex = availableItems.indexOf(item);
+                                const isFocused = itemIndex === state.focusedIndex;
+                                return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
+                                        item.disabled ? 'disabled' : '',
+                                        isFocused ? 'focused' : '',
+                                        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' ') }, (item.disabled
+                                    ? {}
+                                    : {
+                                        onclick: (e) => {
+                                            e.stopPropagation();
+                                            const value = (item.id || item.label);
+                                            state.initialValue = value;
+                                            state.isOpen = false;
+                                            state.focusedIndex = -1;
+                                            if (onchange)
+                                                onchange(value);
+                                        },
+                                    })), m('span', {
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        padding: '14px 16px',
+                                    },
+                                }, [
+                                    item.iconName
+                                        ? m('i.material-icons', {
+                                            style: { marginRight: '32px' },
+                                        }, item.iconName)
+                                        : undefined,
+                                    item.label,
+                                ]));
+                            })),
+                        m(MaterialIcon, {
+                            name: 'caret',
+                            direction: 'down',
+                            class: 'caret',
+                        }),
+                    ]),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * Floating Action Button
+     */
+    const FloatingActionButton = () => {
+        const state = {
+            isOpen: false,
+        };
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!target.closest('.fixed-action-btn')) {
+                state.isOpen = false;
+            }
+        };
+        return {
+            oncreate: () => {
+                document.addEventListener('click', handleClickOutside);
+            },
+            onremove: () => {
+                document.removeEventListener('click', handleClickOutside);
+            },
+            view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
+                ? 'position: absolute; display: inline-block; left: 24px;'
+                : position === 'right' || position === 'inline-right'
+                    ? 'position: absolute; display: inline-block; right: 24px;'
+                    : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
+                const fabClasses = [
+                    'fixed-action-btn',
+                    direction ? `direction-${direction}` : '',
+                    state.isOpen ? 'active' : '',
+                    // hoverEnabled ? 'hover-enabled' : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                return m('div', {
+                    style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
+                }, m(`.${fabClasses}`, {
+                    style,
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        if (buttons && buttons.length > 0) {
+                            state.isOpen = !state.isOpen;
+                        }
+                    },
+                    onmouseover: hoverEnabled
+                        ? () => {
+                            if (buttons && buttons.length > 0) {
+                                state.isOpen = true;
+                            }
+                        }
+                        : undefined,
+                    onmouseleave: hoverEnabled
+                        ? () => {
+                            state.isOpen = false;
+                        }
+                        : undefined,
+                }, [
+                    m('a.btn-floating.btn-large', {
+                        className,
+                    }, m('i.material-icons', { className: iconClass }, iconName)),
+                    buttons &&
+                        buttons.length > 0 &&
+                        m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
+                            style: {
+                                opacity: state.isOpen ? '1' : '0',
+                                transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
+                                transition: `all 0.3s ease ${index * 40}ms`,
+                            },
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                if (button.onclick)
+                                    button.onclick(e);
+                            },
+                        }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
+                ]));
+            },
+        };
+    };
+
+    /**
+     * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
+     * No MaterializeCSS dependencies
+     */
+    const MaterialBox = () => {
+        const state = {
+            isOpen: false,
+            originalImage: null,
+            overlay: null,
+            overlayImage: null,
+        };
+        const openBox = (img, attrs) => {
+            if (state.isOpen)
+                return;
+            state.isOpen = true;
+            state.originalImage = img;
+            if (attrs.onOpenStart)
+                attrs.onOpenStart();
+            // 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;
+    `;
+            // Create enlarged image
+            const enlargedImg = document.createElement('img');
+            enlargedImg.src = img.src;
+            enlargedImg.alt = img.alt || '';
+            enlargedImg.className = 'materialbox-image';
+            // Get original image dimensions and position
+            const imgRect = img.getBoundingClientRect();
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            // Calculate final size maintaining aspect ratio
+            const aspectRatio = img.naturalWidth / img.naturalHeight;
+            const maxWidth = windowWidth * 0.9;
+            const maxHeight = windowHeight * 0.9;
+            let finalWidth = maxWidth;
+            let finalHeight = maxWidth / aspectRatio;
+            if (finalHeight > maxHeight) {
+                finalHeight = maxHeight;
+                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;
+    `;
+            // 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;
@@ -2841,7 +4270,7 @@
             view: ({ attrs }) => {
                 const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
                 return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
-                    height, className: ['materialboxed', className].filter(Boolean).join(' '), style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                    height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
                         e.preventDefault();
                         openBox(e.target, attrs);
                     } }));
@@ -2923,7 +4352,7 @@
                     .filter(Boolean)
                     .join(' ')
                     .trim();
-                const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim();
+                const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined;
                 return m('div', { className: 'modal-container' }, [
                     // Modal overlay
                     m('div', {
@@ -2948,21 +4377,25 @@
                         role: 'dialog',
                         'aria-labelledby': `${id}-title`,
                         'aria-describedby': description ? `${id}-desc` : undefined,
-                        style: {
-                            display: state.isOpen ? 'block' : 'none',
-                            position: 'fixed',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            backgroundColor: '#fff',
-                            borderRadius: '4px',
-                            maxWidth: '75%',
-                            maxHeight: '85%',
-                            overflow: 'auto',
-                            zIndex: '1003',
-                            padding: '0',
-                            boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)',
-                        },
+                        style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet
+                            ? {
+                                // Bottom sheet positioning
+                                top: 'auto',
+                                bottom: '0',
+                                left: '0',
+                                right: '0',
+                                transform: 'none',
+                                maxWidth: '100%',
+                                borderRadius: '8px 8px 0 0',
+                            }
+                            : {
+                                // Regular modal positioning
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                maxWidth: '75%',
+                                borderRadius: '4px',
+                            })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
                         onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                     }, [
                         // Close button
@@ -2982,7 +4415,12 @@
                             }, '×'),
                         // Modal content
                         m('.modal-content', {
-                            style: { padding: '24px', paddingTop: showCloseButton ? '48px' : '24px' },
+                            style: {
+                                padding: '24px',
+                                paddingTop: showCloseButton ? '48px' : '24px',
+                                minHeight: 'auto',
+                                flex: '1 1 auto',
+                            },
                         }, [
                             m('h4', { id: `${id}-title`, style: { margin: '0 0 20px 0' } }, title),
                             description &&
@@ -2993,119 +4431,16 @@
                             buttons.length > 0 &&
                             m('.modal-footer', {
                                 style: {
-                                    padding: '4px 6px',
-                                    borderTop: '1px solid rgba(160,160,160,0.2)',
-                                    textAlign: 'right',
-                                },
-                            }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
-                                    if (buttonProps.onclick)
-                                        buttonProps.onclick(e);
-                                    closeModal(attrs);
-                                } })))),
-                    ]),
-                ]);
-            },
-        };
-    };
-
-    /** Component to show a check box */
-    const InputCheckbox = () => {
-        return {
-            view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
-                const checkboxId = inputId || uniqueId();
-                return m(`p`, { className, style }, m('label', { for: checkboxId }, [
-                    m('input[type=checkbox][tabindex=0]', {
-                        id: checkboxId,
-                        checked,
-                        disabled,
-                        onclick: onchange
-                            ? (e) => {
-                                if (e.target && typeof e.target.checked !== 'undefined') {
-                                    onchange(e.target.checked);
-                                }
-                            }
-                            : undefined,
-                    }),
-                    label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
-                ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
-            },
-        };
-    };
-    /** A list of checkboxes */
-    const Options = () => {
-        const state = {};
-        const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
-        const selectAll = (options, callback) => {
-            const allIds = options.map((option) => option.id);
-            state.checkedIds = [...allIds];
-            if (callback)
-                callback(allIds);
-        };
-        const selectNone = (callback) => {
-            state.checkedIds = [];
-            if (callback)
-                callback([]);
-        };
-        return {
-            oninit: ({ attrs: { initialValue, checkedId, id } }) => {
-                const iv = checkedId || initialValue;
-                state.checkedId = checkedId;
-                state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
-                state.componentId = id || uniqueId();
-            },
-            view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
-                const onchange = callback
-                    ? (propId, checked) => {
-                        const checkedIds = state.checkedIds.filter((i) => i !== propId);
-                        if (checked) {
-                            checkedIds.push(propId);
-                        }
-                        state.checkedIds = checkedIds;
-                        callback(checkedIds);
-                    }
-                    : undefined;
-                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
-                const optionsContent = layout === 'horizontal'
-                    ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
-                        disabled: disabled || option.disabled,
-                        label: option.label,
-                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
-                        className: option.className || checkboxClass,
-                        checked: isChecked(option.id),
-                        description: option.description,
-                        inputId: `${state.componentId}-${option.id}`,
-                    })))
-                    : options.map((option) => m(InputCheckbox, {
-                        disabled: disabled || option.disabled,
-                        label: option.label,
-                        onchange: onchange ? (v) => onchange(option.id, v) : undefined,
-                        className: option.className || checkboxClass,
-                        checked: isChecked(option.id),
-                        description: option.description,
-                        inputId: `${state.componentId}-${option.id}`,
-                    }));
-                return m('div', { id: state.componentId, className: cn, style }, [
-                    label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
-                    showSelectAll &&
-                        m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
-                            m('a', {
-                                href: '#',
-                                onclick: (e) => {
-                                    e.preventDefault();
-                                    selectAll(options, callback);
-                                },
-                                style: 'margin-right: 15px;',
-                            }, 'Select All'),
-                            m('a', {
-                                href: '#',
-                                onclick: (e) => {
-                                    e.preventDefault();
-                                    selectNone(callback);
-                                },
-                            }, 'Select None'),
-                        ]),
-                    description && m(HelperText, { helperText: description }),
-                    m('form', { action: '#' }, optionsContent),
+                                    padding: '4px 6px',
+                                    borderTop: '1px solid var(--mm-border-color, rgba(160,160,160,0.2))',
+                                    textAlign: 'right',
+                                },
+                            }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
+                                    if (buttonProps.onclick)
+                                        buttonProps.onclick(e);
+                                    closeModal(attrs);
+                                } })))),
+                    ]),
                 ]);
             },
         };
@@ -3375,12 +4710,15 @@
         };
         const updateTimeFromInput = (inputValue) => {
             let value = ((inputValue || options.defaultTime || '') + '').split(':');
+            let amPmWasProvided = false;
             if (options.twelveHour && value.length > 1) {
                 if (value[1].toUpperCase().indexOf('AM') > -1) {
                     state.amOrPm = 'AM';
+                    amPmWasProvided = true;
                 }
                 else if (value[1].toUpperCase().indexOf('PM') > -1) {
                     state.amOrPm = 'PM';
+                    amPmWasProvided = true;
                 }
                 value[1] = value[1].replace('AM', '').replace('PM', '').trim();
             }
@@ -3389,21 +4727,33 @@
                 value = [now.getHours().toString(), now.getMinutes().toString()];
                 if (options.twelveHour) {
                     state.amOrPm = parseInt(value[0]) >= 12 ? 'PM' : 'AM';
+                    amPmWasProvided = false; // For 'now', we need to do conversion
                 }
             }
             let hours = +value[0] || 0;
             let minutes = +value[1] || 0;
-            // Handle 24-hour to 12-hour conversion if needed
-            if (options.twelveHour && hours >= 12) {
-                state.amOrPm = 'PM';
-                if (hours > 12) {
-                    hours = hours - 12;
+            if (options.twelveHour) {
+                if (!amPmWasProvided) {
+                    // No AM/PM was provided, assume this is 24-hour format input - convert it
+                    if (hours >= 12) {
+                        state.amOrPm = 'PM';
+                        if (hours > 12) {
+                            hours = hours - 12;
+                        }
+                    }
+                    else {
+                        state.amOrPm = 'AM';
+                        if (hours === 0) {
+                            hours = 12;
+                        }
+                    }
                 }
-            }
-            else if (options.twelveHour && hours < 12) {
-                state.amOrPm = 'AM';
-                if (hours === 0) {
-                    hours = 12;
+                else {
+                    // AM/PM was provided, hours are already in 12-hour format
+                    // Just handle midnight/noon edge cases
+                    if (hours === 0 && state.amOrPm === 'AM') {
+                        hours = 12;
+                    }
                 }
             }
             state.hours = hours;
@@ -4083,7 +5433,7 @@
                         callback(propId);
                     }
                 };
-                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 const optionsContent = layout === 'horizontal'
                     ? m('div.grid-container', options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
                         groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` }))))
@@ -4356,7 +5706,7 @@
             view: ({ attrs }) => {
                 const id = attrs.id || state.id;
                 const { label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
-                const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 return m('div', {
                     className: cn,
                     onclick: (e) => {
@@ -4507,7 +5857,7 @@
             },
             view: ({ attrs }) => {
                 const { tabWidth, tabs, className, style, swipeable = false } = attrs;
-                const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim();
+                const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 const anchoredTabs = tabs.map(toAnchored());
                 const activeTab = setActiveTabId(anchoredTabs, attrs.selectedTabId);
                 updateIndicator();
@@ -5327,6 +6677,17 @@
         return tooltips;
     };
 
+    const defaultI18n$1 = {
+        theme: 'Theme:',
+        light: 'Light',
+        dark: 'Dark',
+        auto: 'Auto',
+        lightTitle: 'Light theme',
+        darkTitle: 'Dark theme',
+        autoTitle: 'Auto theme (system preference)',
+        switchToDark: 'Switch to dark theme',
+        switchToLight: 'Switch to light theme',
+    };
     /**
      * Theme switching utilities and component
      */
@@ -5409,44 +6770,36 @@
                     ThemeManager.initialize();
                 }
             },
-            view: ({ attrs }) => {
-                const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className = '' } = attrs;
+            view: ({ attrs = {} }) => {
+                const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className, i18n } = attrs;
+                const labels = Object.assign(Object.assign({}, defaultI18n$1), i18n);
                 const handleThemeChange = (newTheme) => {
                     ThemeManager.setTheme(newTheme);
                     if (onThemeChange) {
                         onThemeChange(newTheme);
                     }
                 };
-                return m('.theme-switcher', { class: className }, [
-                    showLabels && m('span.theme-switcher-label', 'Theme:'),
+                return m('.theme-switcher', { className }, [
+                    showLabels && m('span.theme-switcher-label', labels.theme),
                     m('.theme-switcher-buttons', [
                         m('button.btn-flat', {
                             class: theme === 'light' ? 'active' : '',
                             onclick: () => handleThemeChange('light'),
-                            title: 'Light theme'
-                        }, [
-                            m('i.material-icons', 'light_mode'),
-                            showLabels && m('span', 'Light')
-                        ]),
+                            title: labels.lightTitle,
+                        }, [m('i.material-icons', 'light_mode'), showLabels && m('span', labels.light)]),
                         m('button.btn-flat', {
                             class: theme === 'auto' ? 'active' : '',
                             onclick: () => handleThemeChange('auto'),
-                            title: 'Auto theme (system preference)'
-                        }, [
-                            m('i.material-icons', 'brightness_auto'),
-                            showLabels && m('span', 'Auto')
-                        ]),
+                            title: labels.autoTitle,
+                        }, [m('i.material-icons', 'brightness_auto'), showLabels && m('span', labels.auto)]),
                         m('button.btn-flat', {
                             class: theme === 'dark' ? 'active' : '',
                             onclick: () => handleThemeChange('dark'),
-                            title: 'Dark theme'
-                        }, [
-                            m('i.material-icons', 'dark_mode'),
-                            showLabels && m('span', 'Dark')
-                        ])
-                    ])
+                            title: labels.darkTitle,
+                        }, [m('i.material-icons', 'dark_mode'), showLabels && m('span', labels.dark)]),
+                    ]),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -5460,41 +6813,55 @@
                     ThemeManager.initialize();
                 }
             },
-            view: ({ attrs }) => {
+            view: ({ attrs = {} }) => {
                 const currentTheme = ThemeManager.getEffectiveTheme();
+                const labels = Object.assign(Object.assign({}, defaultI18n$1), attrs.i18n);
                 return m('button.btn-flat.theme-toggle', {
                     class: attrs.className || '',
                     onclick: () => {
                         ThemeManager.toggle();
-                        m.redraw();
                     },
-                    title: `Switch to ${currentTheme === 'light' ? 'dark' : 'light'} theme`,
-                    style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;'
+                    title: currentTheme === 'light' ? labels.switchToDark : labels.switchToLight,
+                    style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;',
                 }, [
                     m('i.material-icons', {
-                        style: 'color: inherit; font-size: 24px;'
-                    }, currentTheme === 'light' ? 'dark_mode' : 'light_mode')
+                        style: 'color: inherit; font-size: 24px;',
+                    }, currentTheme === 'light' ? 'dark_mode' : 'light_mode'),
                 ]);
-            }
+            },
         };
     };
 
+    const defaultI18n = {
+        label: 'Choose files or drag them here',
+        selectedFiles: 'Selected Files:',
+        acceptedTypes: 'Accepted:',
+        removeFile: 'Remove file',
+        fileSizeExceeds: 'File size exceeds {maxSize}MB limit',
+        fileTypeNotAccepted: 'File type not accepted. Accepted: {accept}',
+        fileSizeUnits: {
+            bytes: 'B',
+            kb: 'KB',
+            mb: 'MB',
+            gb: 'GB',
+        },
+    };
     /**
      * File Upload Component with Drag and Drop
      * Supports multiple files, file type validation, size limits, and image preview
      */
     const FileUpload = () => {
         let state;
-        const validateFile = (file, attrs) => {
+        const validateFile = (file, attrs, labels) => {
             // Check file size
             if (attrs.maxSize && file.size > attrs.maxSize) {
                 const maxSizeMB = (attrs.maxSize / (1024 * 1024)).toFixed(1);
-                return `File size exceeds ${maxSizeMB}MB limit`;
+                return labels.fileSizeExceeds.replace('{maxSize}', maxSizeMB);
             }
             // Check file type
             if (attrs.accept) {
-                const acceptedTypes = attrs.accept.split(',').map(type => type.trim());
-                const isAccepted = acceptedTypes.some(acceptedType => {
+                const acceptedTypes = attrs.accept.split(',').map((type) => type.trim());
+                const isAccepted = acceptedTypes.some((acceptedType) => {
                     if (acceptedType.startsWith('.')) {
                         // Extension check
                         return file.name.toLowerCase().endsWith(acceptedType.toLowerCase());
@@ -5505,7 +6872,7 @@
                     }
                 });
                 if (!isAccepted) {
-                    return `File type not accepted. Accepted: ${attrs.accept}`;
+                    return labels.fileTypeNotAccepted.replace('{accept}', attrs.accept);
                 }
             }
             return null;
@@ -5521,12 +6888,12 @@
                 reader.readAsDataURL(file);
             }
         };
-        const handleFiles = (fileList, attrs) => {
+        const handleFiles = (fileList, attrs, labels) => {
             const newFiles = Array.from(fileList);
             const validFiles = [];
             // Validate each file
             for (const file of newFiles) {
-                const error = validateFile(file, attrs);
+                const error = validateFile(file, attrs, labels);
                 if (error) {
                     file.uploadError = error;
                 }
@@ -5554,20 +6921,20 @@
             }
             // Notify parent component
             if (attrs.onFilesSelected) {
-                attrs.onFilesSelected(state.files.filter(f => !f.uploadError));
+                attrs.onFilesSelected(state.files.filter((f) => !f.uploadError));
             }
         };
         const removeFile = (fileToRemove, attrs) => {
-            state.files = state.files.filter(file => file !== fileToRemove);
+            state.files = state.files.filter((file) => file !== fileToRemove);
             if (attrs.onFileRemoved) {
                 attrs.onFileRemoved(fileToRemove);
             }
         };
-        const formatFileSize = (bytes) => {
+        const formatFileSize = (bytes, labels) => {
             if (bytes === 0)
-                return '0 B';
+                return `0 ${labels.fileSizeUnits.bytes}`;
             const k = 1024;
-            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const sizes = [labels.fileSizeUnits.bytes, labels.fileSizeUnits.kb, labels.fileSizeUnits.mb, labels.fileSizeUnits.gb];
             const i = Math.floor(Math.log(bytes) / Math.log(k));
             return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
         };
@@ -5577,11 +6944,13 @@
                     id: uniqueId(),
                     files: [],
                     isDragOver: false,
-                    isUploading: false
+                    isUploading: false,
                 };
             },
             view: ({ attrs }) => {
-                const { accept, multiple = false, disabled = false, label = 'Choose files or drag them here', helperText, showPreview = true, className = '', error } = attrs;
+                const { accept, multiple = false, disabled = false, label, helperText, showPreview = true, className = '', error, i18n, } = attrs;
+                const labels = Object.assign(Object.assign({}, defaultI18n), i18n);
+                const displayLabel = label || labels.label;
                 return m('.file-upload-container', { class: className }, [
                     // Upload area
                     m('.file-upload-area', {
@@ -5589,8 +6958,10 @@
                             state.isDragOver ? 'drag-over' : '',
                             disabled ? 'disabled' : '',
                             error ? 'error' : '',
-                            state.files.length > 0 ? 'has-files' : ''
-                        ].filter(Boolean).join(' '),
+                            state.files.length > 0 ? 'has-files' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ') || undefined,
                         ondragover: (e) => {
                             if (disabled)
                                 return;
@@ -5613,7 +6984,7 @@
                             e.stopPropagation();
                             state.isDragOver = false;
                             if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
-                                handleFiles(e.dataTransfer.files, attrs);
+                                handleFiles(e.dataTransfer.files, attrs, labels);
                             }
                         },
                         onclick: () => {
@@ -5621,7 +6992,7 @@
                                 return;
                             const input = document.getElementById(state.id);
                             input === null || input === void 0 ? void 0 : input.click();
-                        }
+                        },
                     }, [
                         m('input[type="file"]', {
                             id: state.id,
@@ -5632,59 +7003,57 @@
                             onchange: (e) => {
                                 const target = e.target;
                                 if (target.files) {
-                                    handleFiles(target.files, attrs);
+                                    handleFiles(target.files, attrs, labels);
                                 }
-                            }
+                            },
                         }),
                         m('.file-upload-content', [
                             m('i.material-icons.file-upload-icon', 'cloud_upload'),
-                            m('p.file-upload-label', label),
+                            m('p.file-upload-label', displayLabel),
                             helperText && m('p.file-upload-helper', helperText),
-                            accept && m('p.file-upload-types', `Accepted: ${accept}`)
-                        ])
+                            accept && m('p.file-upload-types', `${labels.acceptedTypes} ${accept}`),
+                        ]),
                     ]),
                     // Error message
                     error && m('.file-upload-error', error),
                     // File list
-                    state.files.length > 0 && m('.file-upload-list', [
-                        m('h6', 'Selected Files:'),
-                        state.files.map(file => m('.file-upload-item', { key: file.name + file.size }, [
-                            // Preview thumbnail
-                            showPreview && file.preview && m('.file-preview', [
-                                m('img', { src: file.preview, alt: file.name })
-                            ]),
-                            // File info
-                            m('.file-info', [
-                                m('.file-name', file.name),
-                                m('.file-details', [
-                                    m('span.file-size', formatFileSize(file.size)),
-                                    file.type && m('span.file-type', file.type)
-                                ]),
-                                // Progress bar (if uploading)
-                                file.uploadProgress !== undefined && m('.file-progress', [
-                                    m('.progress', [
-                                        m('.determinate', {
-                                            style: { width: `${file.uploadProgress}%` }
-                                        })
-                                    ])
+                    state.files.length > 0 &&
+                        m('.file-upload-list', [
+                            m('h6', labels.selectedFiles),
+                            state.files.map((file) => m('.file-upload-item', { key: file.name + file.size }, [
+                                // Preview thumbnail
+                                showPreview && file.preview && m('.file-preview', [m('img', { src: file.preview, alt: file.name })]),
+                                // File info
+                                m('.file-info', [
+                                    m('.file-name', file.name),
+                                    m('.file-details', [
+                                        m('span.file-size', formatFileSize(file.size, labels)),
+                                        file.type && m('span.file-type', file.type),
+                                    ]),
+                                    // Progress bar (if uploading)
+                                    file.uploadProgress !== undefined &&
+                                        m('.file-progress', [
+                                            m('.progress', [
+                                                m('.determinate', {
+                                                    style: { width: `${file.uploadProgress}%` },
+                                                }),
+                                            ]),
+                                        ]),
+                                    // Error message
+                                    file.uploadError && m('.file-error', file.uploadError),
                                 ]),
-                                // Error message
-                                file.uploadError && m('.file-error', file.uploadError)
-                            ]),
-                            // Remove button
-                            m('button.btn-flat.file-remove', {
-                                onclick: (e) => {
-                                    e.stopPropagation();
-                                    removeFile(file, attrs);
-                                },
-                                title: 'Remove file'
-                            }, [
-                                m('i.material-icons', 'close')
-                            ])
-                        ]))
-                    ])
+                                // Remove button
+                                m('button.btn-flat.file-remove', {
+                                    onclick: (e) => {
+                                        e.stopPropagation();
+                                        removeFile(file, attrs);
+                                    },
+                                    title: labels.removeFile,
+                                }, [m('i.material-icons', 'close')]),
+                            ])),
+                        ]),
                 ]);
-            }
+            },
         };
     };
 
@@ -5714,7 +7083,7 @@
                 state = {
                     id: attrs.id || uniqueId(),
                     isOpen: attrs.isOpen || false,
-                    isAnimating: false
+                    isAnimating: false,
                 };
                 // Set up keyboard listener
                 if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
@@ -5743,34 +7112,33 @@
                 }
             },
             view: ({ attrs, children }) => {
-                const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false } = attrs;
+                const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, } = attrs;
                 const isOpen = state.isOpen;
                 return [
                     // Backdrop (using existing materialize class)
-                    showBackdrop && mode === 'overlay' && m('.sidenav-overlay', {
-                        style: {
-                            display: isOpen ? 'block' : 'none',
-                            opacity: isOpen ? '1' : '0'
-                        },
-                        onclick: () => handleBackdropClick(attrs)
-                    }),
+                    showBackdrop &&
+                        mode === 'overlay' &&
+                        m('.sidenav-overlay', {
+                            style: {
+                                display: isOpen ? 'block' : 'none',
+                                opacity: isOpen ? '1' : '0',
+                            },
+                            onclick: () => handleBackdropClick(attrs),
+                        }),
                     // Sidenav (using existing materialize structure)
                     m('ul.sidenav', {
                         id: state.id,
-                        class: [
-                            position === 'right' ? 'right-aligned' : '',
-                            fixed ? 'sidenav-fixed' : '',
-                            className
-                        ].filter(Boolean).join(' '),
+                        class: [position === 'right' ? 'right-aligned' : '', fixed ? 'sidenav-fixed' : '', className]
+                            .filter(Boolean)
+                            .join(' ') || undefined,
                         style: {
                             width: `${width}px`,
-                            transform: isOpen ? 'translateX(0)' :
-                                position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
-                            'transition-duration': `${animationDuration}ms`
-                        }
-                    }, children)
+                            transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
+                            'transition-duration': `${animationDuration}ms`,
+                        },
+                    }, children),
                 ];
-            }
+            },
         };
     };
     /**
@@ -5780,37 +7148,30 @@
     const SidenavItem = () => {
         return {
             view: ({ attrs, children }) => {
-                const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false } = attrs;
+                const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, } = attrs;
                 if (divider) {
                     return m('li.divider');
                 }
                 if (subheader) {
                     return m('li.subheader', text || children);
                 }
-                const itemClasses = [
-                    active ? 'active' : '',
-                    disabled ? 'disabled' : '',
-                    className
-                ].filter(Boolean).join(' ');
-                const content = [
-                    icon && m('i.material-icons', icon),
-                    text || children
-                ];
+                const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', className].filter(Boolean).join(' ') || undefined;
+                const content = [icon && m('i.material-icons', icon), text || children];
                 if (href && !disabled) {
                     return m('li', { class: itemClasses }, [
                         m('a', {
                             href,
-                            onclick: disabled ? undefined : onclick
-                        }, content)
+                            onclick: disabled ? undefined : onclick,
+                        }, content),
                     ]);
                 }
                 return m('li', { class: itemClasses }, [
                     m('a', {
                         onclick: disabled ? undefined : onclick,
-                        href: '#!'
-                    }, content)
+                        href: '#!',
+                    }, content),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -5861,7 +7222,7 @@
     const Breadcrumb = () => {
         return {
             view: ({ attrs }) => {
-                const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false } = attrs;
+                const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false, } = attrs;
                 if (items.length === 0) {
                     return null;
                 }
@@ -5870,52 +7231,46 @@
                 if (maxItems && items.length > maxItems) {
                     const firstItem = items[0];
                     const lastItems = items.slice(-(maxItems - 2));
-                    displayItems = [
-                        firstItem,
-                        { text: '...', disabled: true, className: 'breadcrumb-ellipsis' },
-                        ...lastItems
-                    ];
+                    displayItems = [firstItem, { text: '...', disabled: true, className: 'breadcrumb-ellipsis' }, ...lastItems];
                 }
                 return m('nav.breadcrumb', { class: className }, [
-                    m('ol.breadcrumb-list', displayItems.map((item, index) => {
+                    m('ol.breadcrumb-list', displayItems
+                        .map((item, index) => {
                         const isLast = index === displayItems.length - 1;
                         const isFirst = index === 0;
                         return [
                             // Breadcrumb item
                             m('li.breadcrumb-item', {
-                                class: [
-                                    item.active || isLast ? 'active' : '',
-                                    item.disabled ? 'disabled' : '',
-                                    item.className || ''
-                                ].filter(Boolean).join(' ')
+                                class: [item.active || isLast ? 'active' : '', item.disabled ? 'disabled' : '', item.className || '']
+                                    .filter(Boolean)
+                                    .join(' ') || undefined,
                             }, [
-                                item.href && !item.disabled && !isLast ?
-                                    // Link item
-                                    m('a.breadcrumb-link', {
-                                        href: item.href,
-                                        onclick: item.onclick
-                                    }, [
-                                        (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                        (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                        m('span.breadcrumb-text', item.text)
-                                    ]) :
-                                    // Text item (active or disabled)
-                                    m('span.breadcrumb-text', {
-                                        onclick: item.disabled ? undefined : item.onclick
-                                    }, [
-                                        (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                        (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                        item.text
-                                    ])
+                                item.href && !item.disabled && !isLast
+                                    ? // Link item
+                                        m('a.breadcrumb-link', {
+                                            href: item.href,
+                                            onclick: item.onclick,
+                                        }, [
+                                            showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                            showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                            m('span.breadcrumb-text', item.text),
+                                        ])
+                                    : // Text item (active or disabled)
+                                        m('span.breadcrumb-text', {
+                                            onclick: item.disabled ? undefined : item.onclick,
+                                        }, [
+                                            showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                            showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                            item.text,
+                                        ]),
                             ]),
                             // Separator (except for last item)
-                            !isLast && m('li.breadcrumb-separator', [
-                                m('i.material-icons', separator)
-                            ])
+                            !isLast && m('li.breadcrumb-separator', [m('i.material-icons', separator)]),
                         ];
-                    }).reduce((acc, val) => acc.concat(val), []))
+                    })
+                        .reduce((acc, val) => acc.concat(val), [])),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -5928,7 +7283,7 @@
         items.push({
             text: 'Home',
             href: basePath,
-            icon: 'home'
+            icon: 'home',
         });
         // Add path segments
         let currentPath = basePath;
@@ -5938,7 +7293,7 @@
             items.push({
                 text: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
                 href: isLast ? undefined : currentPath,
-                active: isLast
+                active: isLast,
             });
         });
         return items;
@@ -5957,19 +7312,18 @@
             items.push({
                 text: 'Home',
                 href: '/',
-                icon: 'home'
+                icon: 'home',
             });
             let currentPath = '';
             segments.forEach((segment, index) => {
                 currentPath += '/' + segment;
                 const isLast = index === segments.length - 1;
                 // Use custom text from config or format segment
-                const text = routeConfig[currentPath] ||
-                    segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
+                const text = routeConfig[currentPath] || segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
                 items.push({
                     text,
                     href: isLast ? undefined : currentPath,
-                    active: isLast
+                    active: isLast,
                 });
             });
             return items;
@@ -5981,7 +7335,7 @@
             return hierarchy.map((item, index) => ({
                 text: item[textKey],
                 href: index === hierarchy.length - 1 ? undefined : item[pathKey],
-                active: index === hierarchy.length - 1
+                active: index === hierarchy.length - 1,
             }));
         }
     }
@@ -6115,7 +7469,7 @@
                                     hasError ? 'error' : '',
                                     step.disabled ? 'disabled' : '',
                                     step.optional ? 'optional' : ''
-                                ].filter(Boolean).join(' '),
+                                ].filter(Boolean).join(' ') || undefined,
                                 onclick: allowHeaderNavigation && !step.disabled ?
                                     () => goToStep(index, attrs) : undefined
                             }, [
@@ -6189,6 +7543,729 @@
         };
     };
 
+    // Utility function to check if a node is the last in its branch
+    const isNodeLastInBranch = (nodePath, rootNodes) => {
+        // Navigate to the node's position and check if it's the last child at every level
+        let currentNodes = rootNodes;
+        for (let i = 0; i < nodePath.length; i++) {
+            const index = nodePath[i];
+            const isLastAtThisLevel = index === currentNodes.length - 1;
+            // If this is not the last child at this level, then this node is not last in branch
+            if (!isLastAtThisLevel) {
+                return false;
+            }
+            // Move to the next level if it exists
+            if (i < nodePath.length - 1) {
+                const currentNode = currentNodes[index];
+                if (currentNode.children) {
+                    currentNodes = currentNode.children;
+                }
+            }
+        }
+        return true;
+    };
+    const TreeNodeComponent = () => {
+        return {
+            view: ({ attrs }) => {
+                const { node, level, isSelected, isExpanded, isFocused, showConnectors, iconType, selectionMode, onToggleExpand, onToggleSelect, onFocus, } = attrs;
+                const hasChildren = node.children && node.children.length > 0;
+                const indentLevel = level * 24; // 24px per level
+                return m('li.tree-node', {
+                    class: [
+                        isSelected && 'selected',
+                        isFocused && 'focused',
+                        node.disabled && 'disabled',
+                        hasChildren && 'has-children',
+                        attrs.isLastInBranch && 'tree-last-in-branch',
+                    ]
+                        .filter(Boolean)
+                        .join(' ') || undefined,
+                    'data-node-id': node.id,
+                    'data-level': level,
+                }, [
+                    // Node content
+                    m('.tree-node-content', {
+                        style: {
+                            paddingLeft: `${indentLevel}px`,
+                        },
+                        onclick: node.disabled
+                            ? undefined
+                            : () => {
+                                if (selectionMode !== 'none') {
+                                    onToggleSelect(node.id);
+                                }
+                                onFocus(node.id);
+                            },
+                        onkeydown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                if (!node.disabled && selectionMode !== 'none') {
+                                    onToggleSelect(node.id);
+                                }
+                            }
+                        },
+                        tabindex: node.disabled ? -1 : 0,
+                        role: selectionMode === 'multiple' ? 'option' : 'treeitem',
+                        'aria-selected': selectionMode !== 'none' ? isSelected.toString() : undefined,
+                        'aria-expanded': hasChildren ? isExpanded.toString() : undefined,
+                        'aria-disabled': node.disabled ? 'true' : undefined,
+                    }, [
+                        // Connector lines
+                        showConnectors &&
+                            level > 0 &&
+                            m('.tree-connectors', Array.from({ length: level }, (_, i) => m('.tree-connector', {
+                                key: i,
+                                style: { left: `${i * 24 + 12}px` },
+                            }))),
+                        // Expand/collapse icon or spacer
+                        hasChildren
+                            ? m('.tree-expand-icon', {
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                    if (!node.disabled) {
+                                        onToggleExpand(node.id);
+                                    }
+                                },
+                                class: iconType,
+                            }, [
+                                iconType === 'plus-minus'
+                                    ? m('span.tree-plus-minus', isExpanded ? '−' : '+')
+                                    : iconType === 'triangle'
+                                        ? m('span.tree-triangle', { class: isExpanded ? 'expanded' : undefined }, '▶')
+                                        : iconType === 'chevron'
+                                            ? m(MaterialIcon, {
+                                                name: 'chevron',
+                                                direction: isExpanded ? 'down' : 'right',
+                                                class: 'tree-chevron-icon',
+                                            })
+                                            : m(MaterialIcon, {
+                                                name: 'caret',
+                                                direction: isExpanded ? 'down' : 'right',
+                                                class: 'tree-caret-icon',
+                                            }),
+                            ])
+                            : m('.tree-expand-spacer'), // Spacer for alignment
+                        // Selection indicator for multiple selection
+                        selectionMode === 'multiple' &&
+                            m('.tree-selection-indicator', [
+                                m('input[type=checkbox]', {
+                                    checked: isSelected,
+                                    disabled: node.disabled,
+                                    onchange: () => {
+                                        if (!node.disabled) {
+                                            onToggleSelect(node.id);
+                                        }
+                                    },
+                                    onclick: (e) => e.stopPropagation(),
+                                }),
+                            ]),
+                        // Node icon (optional)
+                        node.icon && m('i.tree-node-icon.material-icons', node.icon),
+                        // Node label
+                        m('span.tree-node-label', node.label),
+                    ]),
+                    // Children (recursive)
+                    hasChildren &&
+                        isExpanded &&
+                        m('ul.tree-children', {
+                            role: 'group',
+                            'aria-expanded': 'true',
+                        }, node.children.map((child, childIndex) => {
+                            var _a, _b, _c, _d, _e, _f;
+                            // Calculate state for each child using treeState
+                            const childIsSelected = (_b = (_a = attrs.treeState) === null || _a === void 0 ? void 0 : _a.selectedIds.has(child.id)) !== null && _b !== void 0 ? _b : false;
+                            const childIsExpanded = (_d = (_c = attrs.treeState) === null || _c === void 0 ? void 0 : _c.expandedIds.has(child.id)) !== null && _d !== void 0 ? _d : false;
+                            const childIsFocused = ((_e = attrs.treeState) === null || _e === void 0 ? void 0 : _e.focusedNodeId) === child.id;
+                            // Calculate if this child is last in branch
+                            const childPath = [...(attrs.currentPath || []), childIndex];
+                            const childIsLastInBranch = ((_f = attrs.treeAttrs) === null || _f === void 0 ? void 0 : _f.data) ?
+                                isNodeLastInBranch(childPath, attrs.treeAttrs.data) : false;
+                            return m(TreeNodeComponent, {
+                                key: child.id,
+                                node: child,
+                                level: level + 1,
+                                isSelected: childIsSelected,
+                                isExpanded: childIsExpanded,
+                                isFocused: childIsFocused,
+                                showConnectors,
+                                iconType,
+                                selectionMode,
+                                onToggleExpand,
+                                onToggleSelect,
+                                onFocus,
+                                isLastInBranch: childIsLastInBranch,
+                                currentPath: childPath,
+                                treeState: attrs.treeState,
+                                treeAttrs: attrs.treeAttrs,
+                            });
+                        })),
+                ]);
+            },
+        };
+    };
+    const TreeView = () => {
+        const state = {
+            selectedIds: new Set(),
+            expandedIds: new Set(),
+            focusedNodeId: null,
+            treeMap: new Map(),
+        };
+        const buildTreeMap = (nodes, map) => {
+            nodes.forEach((node) => {
+                map.set(node.id, node);
+                if (node.children) {
+                    buildTreeMap(node.children, map);
+                }
+            });
+        };
+        const initializeExpandedNodes = (nodes) => {
+            nodes.forEach((node) => {
+                if (node.expanded) {
+                    state.expandedIds.add(node.id);
+                }
+                if (node.children) {
+                    initializeExpandedNodes(node.children);
+                }
+            });
+        };
+        const handleToggleExpand = (nodeId, attrs) => {
+            var _a;
+            const isExpanded = state.expandedIds.has(nodeId);
+            if (isExpanded) {
+                state.expandedIds.delete(nodeId);
+            }
+            else {
+                state.expandedIds.add(nodeId);
+            }
+            (_a = attrs.onexpand) === null || _a === void 0 ? void 0 : _a.call(attrs, { nodeId, expanded: !isExpanded });
+        };
+        const handleToggleSelect = (nodeId, attrs) => {
+            var _a;
+            const { selectionMode = 'single' } = attrs;
+            if (selectionMode === 'single') {
+                state.selectedIds.clear();
+                state.selectedIds.add(nodeId);
+            }
+            else if (selectionMode === 'multiple') {
+                if (state.selectedIds.has(nodeId)) {
+                    state.selectedIds.delete(nodeId);
+                }
+                else {
+                    state.selectedIds.add(nodeId);
+                }
+            }
+            (_a = attrs.onselection) === null || _a === void 0 ? void 0 : _a.call(attrs, Array.from(state.selectedIds));
+        };
+        const handleFocus = (nodeId) => {
+            state.focusedNodeId = nodeId;
+        };
+        const renderNodes = (nodes, attrs, level = 0, parentPath = []) => {
+            return nodes.map((node, index) => {
+                var _a, _b, _c;
+                const isSelected = state.selectedIds.has(node.id);
+                const isExpanded = state.expandedIds.has(node.id);
+                const isFocused = state.focusedNodeId === node.id;
+                const currentPath = [...parentPath, index];
+                const isLastInBranch = isNodeLastInBranch(currentPath, attrs.data);
+                return m(TreeNodeComponent, {
+                    key: node.id,
+                    node,
+                    level,
+                    isSelected,
+                    isExpanded,
+                    isFocused,
+                    showConnectors: (_a = attrs.showConnectors) !== null && _a !== void 0 ? _a : true,
+                    iconType: (_b = attrs.iconType) !== null && _b !== void 0 ? _b : 'caret',
+                    selectionMode: (_c = attrs.selectionMode) !== null && _c !== void 0 ? _c : 'single',
+                    onToggleExpand: (nodeId) => handleToggleExpand(nodeId, attrs),
+                    onToggleSelect: (nodeId) => handleToggleSelect(nodeId, attrs),
+                    onFocus: handleFocus,
+                    isLastInBranch,
+                    currentPath,
+                    // Pass state and attrs for recursive rendering
+                    treeState: state,
+                    treeAttrs: attrs,
+                });
+            });
+        };
+        return {
+            oninit: ({ attrs }) => {
+                // Build internal tree map for efficient lookups
+                buildTreeMap(attrs.data, state.treeMap);
+                // Initialize expanded nodes from data
+                initializeExpandedNodes(attrs.data);
+                // Initialize selected nodes from props
+                if (attrs.selectedIds) {
+                    state.selectedIds = new Set(attrs.selectedIds);
+                }
+            },
+            onupdate: ({ attrs }) => {
+                // Sync selectedIds prop with internal state
+                if (attrs.selectedIds) {
+                    const newSelection = new Set(attrs.selectedIds);
+                    if (newSelection.size !== state.selectedIds.size ||
+                        !Array.from(newSelection).every((id) => state.selectedIds.has(id))) {
+                        state.selectedIds = newSelection;
+                    }
+                }
+            },
+            view: ({ attrs }) => {
+                const { data, className, style, id, selectionMode = 'single', showConnectors = true } = attrs;
+                return m('div.tree-view', {
+                    class: [
+                        className,
+                        showConnectors && 'show-connectors'
+                    ].filter(Boolean).join(' ') || undefined,
+                    style,
+                    id,
+                    role: selectionMode === 'multiple' ? 'listbox' : 'tree',
+                    'aria-multiselectable': selectionMode === 'multiple' ? 'true' : 'false',
+                }, [
+                    m('ul.tree-root', {
+                        role: 'group',
+                    }, renderNodes(data, attrs)),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * Timeline Component
+     * Displays a sequence of events in chronological order with connecting lines
+     * Supports both vertical and horizontal orientations with Material Design styling
+     */
+    const Timeline = () => {
+        const formatTimestamp = (timestamp) => {
+            if (!timestamp)
+                return '';
+            if (typeof timestamp === 'string')
+                return timestamp;
+            return timestamp.toLocaleDateString();
+        };
+        const getColorClass = (color) => {
+            switch (color) {
+                case 'primary':
+                    return 'timeline-primary';
+                case 'secondary':
+                    return 'timeline-secondary';
+                case 'success':
+                    return 'timeline-success';
+                case 'warning':
+                    return 'timeline-warning';
+                case 'error':
+                    return 'timeline-error';
+                case 'info':
+                    return 'timeline-info';
+                default:
+                    return 'timeline-default';
+            }
+        };
+        return {
+            view: ({ attrs }) => {
+                const { items = [], orientation = 'vertical', position = 'right', showConnector = true, className = '', showTimestamps = true, compact = false, } = attrs;
+                const timelineClasses = [
+                    'timeline',
+                    `timeline-${orientation}`,
+                    `timeline-${position}`,
+                    showConnector ? 'timeline-connector' : '',
+                    compact ? 'timeline-compact' : '',
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' ') || undefined;
+                return m('div', { className: timelineClasses }, [
+                    items.map((item, index) => {
+                        const isAlternate = position === 'alternate';
+                        const itemPosition = isAlternate ? (index % 2 === 0 ? 'right' : 'left') : position;
+                        const itemClasses = [
+                            'timeline-item',
+                            `timeline-item-${itemPosition}`,
+                            getColorClass(item.color),
+                            item.disabled ? 'timeline-item-disabled' : '',
+                            item.className || '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ') || undefined;
+                        const handleItemClick = (e) => {
+                            if (item.disabled)
+                                return;
+                            if (item.onclick) {
+                                e.preventDefault();
+                                item.onclick(item, e);
+                            }
+                        };
+                        const isVertical = orientation === 'vertical';
+                        return m('div', {
+                            key: item.id || index,
+                            className: itemClasses,
+                            onclick: item.onclick ? handleItemClick : undefined,
+                            role: item.onclick ? 'button' : undefined,
+                            tabindex: item.onclick && !item.disabled ? 0 : undefined,
+                            'aria-disabled': item.disabled ? 'true' : undefined,
+                        }, [
+                            // Timestamp (on opposite side of content from bullet)
+                            isVertical &&
+                                showTimestamps &&
+                                item.timestamp &&
+                                m(`.timeline-timestamp-separate${!item.icon ? '.timeline-dot-small' : ''}`, formatTimestamp(item.timestamp)),
+                            // Timeline separator containing dot and connector
+                            m('.timeline-separator', [
+                                // Timeline dot/icon
+                                m(`.timeline-dot${!item.icon ? '.timeline-dot-small' : ''}`, [
+                                    item.icon ? m('i.material-icons.timeline-icon', item.icon) : m('.timeline-marker'),
+                                ]),
+                                // Timeline connector (only show if not the last item and connectors are enabled)
+                                showConnector && index < items.length - 1 && m('.timeline-connector'),
+                            ]),
+                            // Content container
+                            m('.timeline-content', [
+                                // Timestamp for horizontal layout or when not shown separately
+                                !isVertical &&
+                                    showTimestamps &&
+                                    item.timestamp &&
+                                    m('.timeline-timestamp', formatTimestamp(item.timestamp)),
+                                // Main content
+                                item.content
+                                    ? item.content
+                                    : m('.timeline-text', [
+                                        item.label && m('.timeline-label', item.label),
+                                        item.description && m('.timeline-description', item.description),
+                                    ]),
+                            ]),
+                        ]);
+                    }),
+                ]);
+            },
+        };
+    };
+
+    const Masonry = () => {
+        let containerRef = null;
+        const itemHeights = []; // measured heights
+        let resizeObserver = null;
+        const defaultBreakpoints = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 };
+        const getColumnsCount = (columns = 3) => {
+            if (typeof columns === 'number')
+                return columns;
+            const breakpoints = Object.assign(Object.assign({}, defaultBreakpoints), columns);
+            const width = window.innerWidth;
+            if (width >= 1200)
+                return breakpoints.xl || 5;
+            if (width >= 992)
+                return breakpoints.lg || 4;
+            if (width >= 768)
+                return breakpoints.md || 3;
+            if (width >= 576)
+                return breakpoints.sm || 2;
+            return breakpoints.xs || 1;
+        };
+        const setupResizeObserver = () => {
+            if (resizeObserver)
+                return;
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const el = entry.target;
+                    const index = Number(el.dataset.index);
+                    if (!isNaN(index)) {
+                        const h = el.offsetHeight;
+                        if (itemHeights[index] !== h) {
+                            itemHeights[index] = h;
+                            m.redraw();
+                        }
+                    }
+                }
+            });
+        };
+        const cleanup = () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            }
+        };
+        return {
+            onremove: cleanup,
+            view: ({ attrs, children }) => {
+                const { columns = 3, spacing = 16, className = '', onItemClick, cssOnly = false, animationDelay } = attrs;
+                const gap = typeof spacing === 'number' ? spacing : parseInt(spacing, 10) || 16;
+                const columnsCount = typeof columns === 'number' ? columns : getColumnsCount(columns);
+                const containerClasses = [
+                    'masonry',
+                    cssOnly ? 'masonry-css' : 'masonry-js',
+                    animationDelay ? 'masonry-animated' : '',
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                const containerStyle = { position: 'relative' };
+                // --- CSS-only fallback ---
+                if (cssOnly) {
+                    containerStyle.display = 'grid';
+                    containerStyle.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;
+                    containerStyle.gap = `${gap}px`;
+                    return m('div', { className: containerClasses, style: containerStyle }, children);
+                }
+                // --- JS Masonry ---
+                const containerWidth = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.offsetWidth) || 800;
+                const totalGapWidth = gap * (columnsCount - 1);
+                const columnWidth = (containerWidth - totalGapWidth) / columnsCount;
+                const columnHeights = new Array(columnsCount).fill(0);
+                const positionedChildren = [];
+                (Array.isArray(children) ? children : [children]).forEach((child, index) => {
+                    var _a;
+                    const shortestColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
+                    const x = shortestColumnIndex * (columnWidth + gap);
+                    const y = columnHeights[shortestColumnIndex];
+                    const itemHeight = (_a = itemHeights[index]) !== null && _a !== void 0 ? _a : 200; // fallback until measured
+                    columnHeights[shortestColumnIndex] += itemHeight + gap;
+                    const itemStyle = {
+                        position: 'absolute',
+                        left: `${x}px`,
+                        top: `${y}px`,
+                        width: `${columnWidth}px`,
+                        transition: 'all 0.3s ease',
+                        animationDelay: animationDelay ? `${index * animationDelay}ms` : undefined,
+                    };
+                    positionedChildren.push(m('div', {
+                        key: `masonry-item-${index}`,
+                        className: 'masonry-item',
+                        style: itemStyle,
+                        'data-index': index,
+                        onclick: onItemClick ? (e) => onItemClick(index, e) : undefined,
+                        oncreate: ({ dom }) => {
+                            const el = dom;
+                            setupResizeObserver();
+                            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(el);
+                            const h = el.offsetHeight;
+                            if (itemHeights[index] !== h) {
+                                itemHeights[index] = h;
+                                m.redraw();
+                            }
+                        },
+                        onremove: ({ dom }) => {
+                            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(dom);
+                        },
+                    }, child));
+                });
+                containerStyle.height = `${Math.max(...columnHeights) - gap}px`;
+                return m('div', {
+                    className: containerClasses,
+                    style: containerStyle,
+                    oncreate: ({ dom }) => {
+                        containerRef = dom;
+                    },
+                }, positionedChildren);
+            },
+        };
+    };
+
+    /**
+     * ImageList Component
+     * Displays a collection of images in various grid layouts
+     * Supports standard grid, quilted (varied sizes), masonry, and woven patterns
+     */
+    const ImageList = () => {
+        const defaultBreakpoints = {
+            xs: 1,
+            sm: 2,
+            md: 3,
+            lg: 4,
+            xl: 5
+        };
+        const getColumnsCount = (cols = 3) => {
+            if (typeof cols === 'number')
+                return cols;
+            const breakpoints = Object.assign(Object.assign({}, defaultBreakpoints), cols);
+            const width = typeof window !== 'undefined' ? window.innerWidth : 1024;
+            if (width >= 1200)
+                return breakpoints.xl || 5;
+            if (width >= 992)
+                return breakpoints.lg || 4;
+            if (width >= 768)
+                return breakpoints.md || 3;
+            if (width >= 576)
+                return breakpoints.sm || 2;
+            return breakpoints.xs || 1;
+        };
+        const handleImageLoad = (e) => {
+            const img = e.target;
+            img.classList.add('loaded');
+        };
+        const handleImageError = (e) => {
+            const img = e.target;
+            img.classList.add('error');
+            // Could set a placeholder image here
+            img.alt = 'Failed to load image';
+        };
+        const renderImage = (item, index, options) => {
+            const { src, alt = '', title, subtitle, onclick, actionButton, className = '', loading = options.loading || 'lazy', aspectRatio, cols = 1, rows = 1, featured = false } = item;
+            const itemClasses = [
+                'image-list-item',
+                featured ? 'image-list-item-featured' : '',
+                onclick ? 'image-list-item-clickable' : '',
+                className
+            ].filter(Boolean).join(' ');
+            const itemStyle = {};
+            // Quilted layout with fixed alternating pattern
+            if (options.variant === 'quilted') {
+                if (featured || index % 7 === 0) {
+                    itemStyle.gridColumnEnd = 'span 2';
+                    itemStyle.gridRowEnd = 'span 2';
+                }
+                else if (index % 3 === 0) {
+                    itemStyle.gridColumnEnd = 'span 2';
+                    itemStyle.gridRowEnd = 'span 1';
+                }
+                else {
+                    itemStyle.gridColumnEnd = 'span 1';
+                    itemStyle.gridRowEnd = 'span 1';
+                }
+            }
+            // Woven layout with varied sizes based on item properties
+            if (options.variant === 'woven') {
+                itemStyle.gridColumnEnd = `span ${cols}`;
+                itemStyle.gridRowEnd = `span ${rows}`;
+            }
+            // Masonry layout - prevent break inside items
+            if (options.variant === 'masonry') {
+                itemStyle.breakInside = 'avoid';
+                itemStyle.marginBottom = typeof options.gap === 'number' ? `${options.gap}px` : options.gap || '4px';
+                itemStyle.display = 'inline-block';
+                itemStyle.width = '100%';
+            }
+            // Custom aspect ratio
+            if (aspectRatio && options.variant !== 'masonry') {
+                itemStyle.aspectRatio = aspectRatio.toString();
+            }
+            const handleItemClick = (e) => {
+                if (onclick) {
+                    e.preventDefault();
+                    onclick(item, e);
+                }
+            };
+            const handleActionClick = (e) => {
+                e.stopPropagation();
+                if (actionButton === null || actionButton === void 0 ? void 0 : actionButton.onclick) {
+                    actionButton.onclick(item, e);
+                }
+            };
+            return m(`.${itemClasses}`, {
+                key: `image-${index}`,
+                style: itemStyle,
+                onclick: onclick ? handleItemClick : undefined,
+                role: onclick ? 'button' : undefined,
+                tabindex: onclick ? 0 : undefined,
+            }, [
+                m('.image-list-item-img', [
+                    m('img', {
+                        src,
+                        alt,
+                        loading,
+                        onload: handleImageLoad,
+                        onerror: handleImageError,
+                        draggable: false,
+                    }),
+                    // Loading placeholder
+                    m('.image-list-item-placeholder'),
+                ]),
+                // Title overlay
+                (options.showTitles && (title || subtitle)) &&
+                    m('.image-list-item-bar', [
+                        m('.image-list-item-title-wrap', [
+                            title && m('.image-list-item-title', title),
+                            subtitle && m('.image-list-item-subtitle', subtitle)
+                        ])
+                    ]),
+                // Action button
+                (options.showActions && actionButton) &&
+                    m('button.image-list-item-action', {
+                        class: `image-list-action-${actionButton.position || 'top-right'}`,
+                        onclick: handleActionClick,
+                        'aria-label': actionButton.ariaLabel || `Action for ${title || alt}`,
+                    }, [
+                        m('i.material-icons', actionButton.icon)
+                    ])
+            ]);
+        };
+        return {
+            view: ({ attrs }) => {
+                const { items = [], variant = 'standard', cols = 3, gap = 4, rowHeight = 'auto', className = '', showTitles = false, showActions = false } = attrs;
+                const columnsCount = getColumnsCount(cols);
+                const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
+                const containerClasses = [
+                    'image-list',
+                    `image-list-${variant}`,
+                    showTitles ? 'image-list-with-titles' : '',
+                    showActions ? 'image-list-with-actions' : '',
+                    className
+                ].filter(Boolean).join(' ');
+                const containerStyle = {
+                    gap: gapValue
+                };
+                // Set up grid based on variant
+                switch (variant) {
+                    case 'standard':
+                        containerStyle.display = 'grid';
+                        containerStyle.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;
+                        if (rowHeight !== 'auto') {
+                            containerStyle.gridAutoRows = typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight;
+                        }
+                        break;
+                    case 'quilted':
+                        // Fixed pattern like woven
+                        containerStyle.display = 'grid';
+                        containerStyle.gridTemplateColumns = `repeat(${Math.max(columnsCount * 2, 4)}, 1fr)`;
+                        containerStyle.gridAutoRows = typeof rowHeight === 'number' ? `${rowHeight}px` : '150px';
+                        containerStyle.gridAutoFlow = 'dense';
+                        break;
+                    case 'masonry':
+                        // Use CSS columns for masonry effect  
+                        containerStyle.display = 'block';
+                        containerStyle.columnCount = columnsCount;
+                        containerStyle.columnGap = gapValue;
+                        containerStyle.columnFill = 'balance';
+                        containerStyle.orphans = 1;
+                        containerStyle.widows = 1;
+                        break;
+                    case 'woven':
+                        // Varied sizes based on item cols/rows
+                        containerStyle.display = 'grid';
+                        containerStyle.gridTemplateColumns = `repeat(${columnsCount}, 1fr)`;
+                        containerStyle.gridAutoRows = typeof rowHeight === 'number' ? `${rowHeight}px` : '200px';
+                        containerStyle.gridAutoFlow = 'dense';
+                        break;
+                }
+                return m(`.${containerClasses}`, {
+                    style: containerStyle
+                }, [
+                    items.map((item, index) => renderImage(item, index, attrs))
+                ]);
+            }
+        };
+    };
+
+    /**
+     * @fileoverview Core TypeScript utility types for mithril-materialized library
+     * These types improve type safety and developer experience across all components
+     */
+    /**
+     * Type guard to check if validation result indicates success
+     * @param result - The validation result to check
+     * @returns True if validation passed
+     */
+    const isValidationSuccess = (result) => result === true || result === '';
+    /**
+     * Type guard to check if validation result indicates an error
+     * @param result - The validation result to check
+     * @returns True if validation failed
+     */
+    const isValidationError = (result) => !isValidationSuccess(result);
+    // ============================================================================
+    // EXPORTS
+    // ============================================================================
+    // All types are already exported via individual export declarations above
+
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
     exports.Breadcrumb = Breadcrumb;
@@ -6203,7 +8280,9 @@
     exports.CollapsibleItem = CollapsibleItem;
     exports.Collection = Collection;
     exports.ColorInput = ColorInput;
+    exports.DataTable = DataTable;
     exports.DatePicker = DatePicker;
+    exports.DoubleRangeSlider = DoubleRangeSlider;
     exports.Dropdown = Dropdown;
     exports.EmailInput = EmailInput;
     exports.FileInput = FileInput;
@@ -6212,16 +8291,20 @@
     exports.FloatingActionButton = FloatingActionButton;
     exports.HelperText = HelperText;
     exports.Icon = Icon;
+    exports.ImageList = ImageList;
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;
     exports.LargeButton = LargeButton;
     exports.ListItem = ListItem;
     exports.Mandatory = Mandatory;
+    exports.Masonry = Masonry;
     exports.MaterialBox = MaterialBox;
+    exports.MaterialIcon = MaterialIcon;
     exports.ModalPanel = ModalPanel;
     exports.NumberInput = NumberInput;
     exports.Options = Options;
     exports.Pagination = Pagination;
+    exports.PaginationControls = PaginationControls;
     exports.Parallax = Parallax;
     exports.PasswordInput = PasswordInput;
     exports.Pushpin = Pushpin;
@@ -6236,6 +8319,7 @@
     exports.Sidenav = Sidenav;
     exports.SidenavItem = SidenavItem;
     exports.SidenavManager = SidenavManager;
+    exports.SingleRangeSlider = SingleRangeSlider;
     exports.SmallButton = SmallButton;
     exports.Stepper = Stepper;
     exports.SubmitButton = SubmitButton;
@@ -6247,10 +8331,12 @@
     exports.ThemeSwitcher = ThemeSwitcher;
     exports.ThemeToggle = ThemeToggle;
     exports.TimePicker = TimePicker;
+    exports.Timeline = Timeline;
     exports.Toast = Toast;
     exports.ToastComponent = ToastComponent;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
+    exports.TreeView = TreeView;
     exports.UrlInput = UrlInput;
     exports.Wizard = Wizard;
     exports.createBreadcrumb = createBreadcrumb;
@@ -6258,6 +8344,8 @@
     exports.initPushpins = initPushpins;
     exports.initTooltips = initTooltips;
     exports.isNumeric = isNumeric;
+    exports.isValidationError = isValidationError;
+    exports.isValidationSuccess = isValidationSuccess;
     exports.padLeft = padLeft;
     exports.range = range;
     exports.toast = toast;