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

package/dist/index.js

@@ -418,12 +418,18 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
     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)}`, {}
@@ -832,6 +838,18 @@ const iconPaths = {
         '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 {
@@ -841,8 +859,8 @@ const MaterialIcon = () => {
             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;
@@ -1151,7 +1169,7 @@ const CodeBlock = () => ({
         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),
@@ -1334,7 +1352,7 @@ const Collection = () => {
     };
 };
 
-const defaultI18n = {
+const defaultI18n$2 = {
     cancel: 'Cancel',
     clear: 'Clear',
     done: 'Ok',
@@ -1442,9 +1460,9 @@ const DatePicker = () => {
         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) => {
@@ -1463,6 +1481,42 @@ const DatePicker = () => {
         });
         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;
@@ -1489,6 +1543,55 @@ const DatePicker = () => {
             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;
@@ -1547,6 +1650,21 @@ const DatePicker = () => {
                     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');
                 }
@@ -1567,9 +1685,14 @@ const DatePicker = () => {
                                 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;
+                                    }
                                 }
                             }
                         },
@@ -1629,16 +1752,37 @@ const DatePicker = () => {
                         (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) {
@@ -1685,14 +1829,58 @@ const DatePicker = () => {
         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}`),
+                    ]);
+                }
             }
         };
     };
@@ -1841,6 +2029,10 @@ const DatePicker = () => {
                 id: uniqueId(),
                 isOpen: false,
                 date: null,
+                startDate: null,
+                endDate: null,
+                selectionMode: null,
+                isSelectingRange: false,
                 calendars: [{ month: 0, year: 0 }],
                 monthDropdownOpen: false,
                 yearDropdownOpen: false,
@@ -1865,17 +2057,35 @@ const DatePicker = () => {
                     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);
@@ -1891,19 +2101,61 @@ const DatePicker = () => {
             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', {
@@ -2007,8 +2259,19 @@ const DatePicker = () => {
                                         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();
@@ -2037,246 +2300,458 @@ const DatePicker = () => {
     };
 };
 
-/** 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 */
@@ -2416,6 +2891,12 @@ const InputField = (type, defaultClass = '') => () => {
         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;
@@ -2441,18 +2922,39 @@ const InputField = (type, defaultClass = '') => () => {
             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);
@@ -2468,7 +2970,7 @@ const InputField = (type, defaultClass = '') => () => {
                             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';
@@ -2665,83 +3167,1010 @@ const FileInput = () => {
     };
 };
 
-/**
- * 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;
@@ -2839,7 +4268,7 @@ const MaterialBox = () => {
         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);
                 } }));
@@ -2921,7 +4350,7 @@ const ModalPanel = () => {
                 .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', {
@@ -2946,21 +4375,25 @@ const ModalPanel = () => {
                     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
@@ -2980,7 +4413,12 @@ const ModalPanel = () => {
                         }, '×'),
                     // 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 &&
@@ -2991,119 +4429,16 @@ const ModalPanel = () => {
                         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);
+                            } })))),
+                ]),
             ]);
         },
     };
@@ -3373,12 +4708,15 @@ const TimePicker = () => {
     };
     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();
         }
@@ -3387,21 +4725,33 @@ const TimePicker = () => {
             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;
@@ -4081,7 +5431,7 @@ const RadioButtons = () => {
                     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}` }))))
@@ -4354,7 +5704,7 @@ const Switch = () => {
         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) => {
@@ -4505,7 +5855,7 @@ const Tabs = () => {
         },
         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();
@@ -5325,6 +6675,17 @@ const initTooltips = (selector = '[data-tooltip]', options = {}) => {
     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
  */
@@ -5407,44 +6768,36 @@ const ThemeSwitcher = () => {
                 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)]),
+                ]),
             ]);
-        }
+        },
     };
 };
 /**
@@ -5458,41 +6811,55 @@ const ThemeToggle = () => {
                 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());
@@ -5503,7 +6870,7 @@ const FileUpload = () => {
                 }
             });
             if (!isAccepted) {
-                return `File type not accepted. Accepted: ${attrs.accept}`;
+                return labels.fileTypeNotAccepted.replace('{accept}', attrs.accept);
             }
         }
         return null;
@@ -5519,12 +6886,12 @@ const FileUpload = () => {
             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;
             }
@@ -5552,20 +6919,20 @@ const FileUpload = () => {
         }
         // 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];
     };
@@ -5575,11 +6942,13 @@ const FileUpload = () => {
                 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', {
@@ -5587,8 +6956,10 @@ const FileUpload = () => {
                         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;
@@ -5611,7 +6982,7 @@ const FileUpload = () => {
                         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: () => {
@@ -5619,7 +6990,7 @@ const FileUpload = () => {
                             return;
                         const input = document.getElementById(state.id);
                         input === null || input === void 0 ? void 0 : input.click();
-                    }
+                    },
                 }, [
                     m('input[type="file"]', {
                         id: state.id,
@@ -5630,59 +7001,57 @@ const FileUpload = () => {
                         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')]),
+                        ])),
+                    ]),
             ]);
-        }
+        },
     };
 };
 
@@ -5712,7 +7081,7 @@ const Sidenav = () => {
             state = {
                 id: attrs.id || uniqueId(),
                 isOpen: attrs.isOpen || false,
-                isAnimating: false
+                isAnimating: false,
             };
             // Set up keyboard listener
             if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
@@ -5741,34 +7110,33 @@ const Sidenav = () => {
             }
         },
         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),
             ];
-        }
+        },
     };
 };
 /**
@@ -5778,37 +7146,30 @@ const Sidenav = () => {
 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),
             ]);
-        }
+        },
     };
 };
 /**
@@ -5859,7 +7220,7 @@ class SidenavManager {
 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;
             }
@@ -5868,52 +7229,46 @@ const Breadcrumb = () => {
             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), [])),
             ]);
-        }
+        },
     };
 };
 /**
@@ -5926,7 +7281,7 @@ const createBreadcrumb = (path, basePath = '/') => {
     items.push({
         text: 'Home',
         href: basePath,
-        icon: 'home'
+        icon: 'home',
     });
     // Add path segments
     let currentPath = basePath;
@@ -5936,7 +7291,7 @@ const createBreadcrumb = (path, basePath = '/') => {
         items.push({
             text: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
             href: isLast ? undefined : currentPath,
-            active: isLast
+            active: isLast,
         });
     });
     return items;
@@ -5955,19 +7310,18 @@ class BreadcrumbManager {
         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;
@@ -5979,7 +7333,7 @@ class BreadcrumbManager {
         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,
         }));
     }
 }
@@ -6113,7 +7467,7 @@ const Wizard = () => {
                                 hasError ? 'error' : '',
                                 step.disabled ? 'disabled' : '',
                                 step.optional ? 'optional' : ''
-                            ].filter(Boolean).join(' '),
+                            ].filter(Boolean).join(' ') || undefined,
                             onclick: allowHeaderNavigation && !step.disabled ?
                                 () => goToStep(index, attrs) : undefined
                         }, [
@@ -6187,6 +7541,729 @@ const Stepper = () => {
     };
 };
 
+// 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;
@@ -6201,7 +8278,9 @@ exports.Collapsible = Collapsible;
 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;
@@ -6210,16 +8289,20 @@ exports.FlatButton = FlatButton;
 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;
@@ -6234,6 +8317,7 @@ exports.Select = Select;
 exports.Sidenav = Sidenav;
 exports.SidenavItem = SidenavItem;
 exports.SidenavManager = SidenavManager;
+exports.SingleRangeSlider = SingleRangeSlider;
 exports.SmallButton = SmallButton;
 exports.Stepper = Stepper;
 exports.SubmitButton = SubmitButton;
@@ -6245,10 +8329,12 @@ exports.ThemeManager = ThemeManager;
 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;
@@ -6256,6 +8342,8 @@ exports.getDropdownStyles = getDropdownStyles;
 exports.initPushpins = initPushpins;
 exports.initTooltips = initTooltips;
 exports.isNumeric = isNumeric;
+exports.isValidationError = isValidationError;
+exports.isValidationSuccess = isValidationSuccess;
 exports.padLeft = padLeft;
 exports.range = range;
 exports.toast = toast;