mithril-materialized 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/index.umd.js

@@ -420,12 +420,18 @@
         return () => {
             return {
                 view: ({ attrs }) => {
-                    const { modalId, tooltip, tooltipPostion, iconName, iconClass, label, className, attr } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr"]);
-                    const cn = [modalId ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                    const { modalId, tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
+                    iconName, iconClass, label, className, attr, variant } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr", "variant"]);
+                    // Handle both new variant prop and legacy modalId/type
+                    const buttonType = (variant === null || variant === void 0 ? void 0 : variant.type) || (modalId ? 'modal' : type || 'button');
+                    const modalTarget = (variant === null || variant === void 0 ? void 0 : variant.type) === 'modal' ? variant.modalId : modalId;
+                    const cn = [modalTarget ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
                         .filter(Boolean)
                         .join(' ')
                         .trim();
-                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalId ? `#${modalId}` : undefined, 'data-position': tooltip ? tooltipPostion || 'top' : undefined, 'data-tooltip': tooltip || undefined, type }), 
+                    // Use tooltipPosition if available, fallback to legacy tooltipPostion
+                    const position = tooltipPosition || tooltipPostion || 'top';
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalTarget ? `#${modalTarget}` : undefined, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType === 'modal' ? 'button' : buttonType }), 
                     // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
                     //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
                     // }${toAttributeString(attr)}`, {}
@@ -834,6 +840,18 @@
             'M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z',
             'M0 0h24v24H0z',
         ],
+        chevron: [
+            'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
+            'M0 0h24v24H0z', // background
+        ],
+        expand: [
+            'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
+            'M0 0h24v24H0z', // background
+        ],
+        collapse: [
+            'M19 13H5v-2h14v2z', // minus
+            'M0 0h24v24H0z', // background
+        ],
     };
     const MaterialIcon = () => {
         return {
@@ -843,8 +861,8 @@
                 const rotationMap = {
                     down: 0,
                     up: 180,
-                    left: -90,
-                    right: 90,
+                    left: 90,
+                    right: -90,
                 };
                 const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
                 const transform = rotation ? `rotate(${rotation}deg)` : undefined;
@@ -1153,7 +1171,7 @@
             const lang = language || 'lang-TypeScript';
             const label = lang.replace('lang-', '');
             const cb = code instanceof Array ? code.join('\n') : code;
-            const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim();
+            const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
             return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
                 m('div', m('label', label)),
                 m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
@@ -2039,248 +2057,6 @@
         };
     };
 
-    /** 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))))),
-                ]));
-            },
-        };
-    };
-
     /** Character counter component that tracks text length against maxLength */
     const CharacterCounter = () => {
         return {
@@ -2448,13 +2224,14 @@
                 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;
                 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, 
                         // attributes,
                         oncreate: ({ dom }) => {
                             const input = (state.inputElement = dom);
@@ -2658,11 +2435,938 @@
                                 i.value = '';
                                 onchange && onchange({});
                             },
-                        }, m(MaterialIcon, {
-                            name: 'close',
-                            className: 'close',
-                        })),
-                ]);
+                        }, m(MaterialIcon, {
+                            name: 'close',
+                            className: 'close',
+                        })),
+                ]);
+            },
+        };
+    };
+
+    /** 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() || 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))))),
+                ]));
             },
         };
     };
@@ -2841,7 +3545,7 @@
             view: ({ attrs }) => {
                 const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
                 return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
-                    height, className: ['materialboxed', className].filter(Boolean).join(' '), style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                    height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
                         e.preventDefault();
                         openBox(e.target, attrs);
                     } }));
@@ -2923,7 +3627,7 @@
                     .filter(Boolean)
                     .join(' ')
                     .trim();
-                const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim();
+                const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined;
                 return m('div', { className: 'modal-container' }, [
                     // Modal overlay
                     m('div', {
@@ -2948,21 +3652,25 @@
                         role: 'dialog',
                         'aria-labelledby': `${id}-title`,
                         'aria-describedby': description ? `${id}-desc` : undefined,
-                        style: {
-                            display: state.isOpen ? 'block' : 'none',
-                            position: 'fixed',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            backgroundColor: '#fff',
-                            borderRadius: '4px',
-                            maxWidth: '75%',
-                            maxHeight: '85%',
-                            overflow: 'auto',
-                            zIndex: '1003',
-                            padding: '0',
-                            boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)',
-                        },
+                        style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet
+                            ? {
+                                // Bottom sheet positioning
+                                top: 'auto',
+                                bottom: '0',
+                                left: '0',
+                                right: '0',
+                                transform: 'none',
+                                maxWidth: '100%',
+                                borderRadius: '8px 8px 0 0',
+                            }
+                            : {
+                                // Regular modal positioning
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                maxWidth: '75%',
+                                borderRadius: '4px',
+                            })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
                         onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                     }, [
                         // Close button
@@ -2982,7 +3690,12 @@
                             }, '×'),
                         // Modal content
                         m('.modal-content', {
-                            style: { padding: '24px', paddingTop: showCloseButton ? '48px' : '24px' },
+                            style: {
+                                padding: '24px',
+                                paddingTop: showCloseButton ? '48px' : '24px',
+                                minHeight: 'auto',
+                                flex: '1 1 auto',
+                            },
                         }, [
                             m('h4', { id: `${id}-title`, style: { margin: '0 0 20px 0' } }, title),
                             description &&
@@ -2994,7 +3707,7 @@
                             m('.modal-footer', {
                                 style: {
                                     padding: '4px 6px',
-                                    borderTop: '1px solid rgba(160,160,160,0.2)',
+                                    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) => {
@@ -3008,109 +3721,6 @@
         };
     };
 
-    /** 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),
-                ]);
-            },
-        };
-    };
-
     const PaginationItem = () => ({
         view: ({ attrs: { title, href, active, disabled } }) => m('li', { className: active ? 'active' : disabled ? 'disabled' : 'waves-effect' }, typeof title === 'number' ? m(m.route.Link, { href }, title) : title),
     });
@@ -3375,12 +3985,15 @@
         };
         const updateTimeFromInput = (inputValue) => {
             let value = ((inputValue || options.defaultTime || '') + '').split(':');
+            let amPmWasProvided = false;
             if (options.twelveHour && value.length > 1) {
                 if (value[1].toUpperCase().indexOf('AM') > -1) {
                     state.amOrPm = 'AM';
+                    amPmWasProvided = true;
                 }
                 else if (value[1].toUpperCase().indexOf('PM') > -1) {
                     state.amOrPm = 'PM';
+                    amPmWasProvided = true;
                 }
                 value[1] = value[1].replace('AM', '').replace('PM', '').trim();
             }
@@ -3389,21 +4002,33 @@
                 value = [now.getHours().toString(), now.getMinutes().toString()];
                 if (options.twelveHour) {
                     state.amOrPm = parseInt(value[0]) >= 12 ? 'PM' : 'AM';
+                    amPmWasProvided = false; // For 'now', we need to do conversion
                 }
             }
             let hours = +value[0] || 0;
             let minutes = +value[1] || 0;
-            // Handle 24-hour to 12-hour conversion if needed
-            if (options.twelveHour && hours >= 12) {
-                state.amOrPm = 'PM';
-                if (hours > 12) {
-                    hours = hours - 12;
+            if (options.twelveHour) {
+                if (!amPmWasProvided) {
+                    // No AM/PM was provided, assume this is 24-hour format input - convert it
+                    if (hours >= 12) {
+                        state.amOrPm = 'PM';
+                        if (hours > 12) {
+                            hours = hours - 12;
+                        }
+                    }
+                    else {
+                        state.amOrPm = 'AM';
+                        if (hours === 0) {
+                            hours = 12;
+                        }
+                    }
                 }
-            }
-            else if (options.twelveHour && hours < 12) {
-                state.amOrPm = 'AM';
-                if (hours === 0) {
-                    hours = 12;
+                else {
+                    // AM/PM was provided, hours are already in 12-hour format
+                    // Just handle midnight/noon edge cases
+                    if (hours === 0 && state.amOrPm === 'AM') {
+                        hours = 12;
+                    }
                 }
             }
             state.hours = hours;
@@ -4083,7 +4708,7 @@
                         callback(propId);
                     }
                 };
-                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 const optionsContent = layout === 'horizontal'
                     ? m('div.grid-container', options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
                         groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` }))))
@@ -4356,7 +4981,7 @@
             view: ({ attrs }) => {
                 const id = attrs.id || state.id;
                 const { label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
-                const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 return m('div', {
                     className: cn,
                     onclick: (e) => {
@@ -4507,7 +5132,7 @@
             },
             view: ({ attrs }) => {
                 const { tabWidth, tabs, className, style, swipeable = false } = attrs;
-                const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim();
+                const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 const anchoredTabs = tabs.map(toAnchored());
                 const activeTab = setActiveTabId(anchoredTabs, attrs.selectedTabId);
                 updateIndicator();
@@ -5493,8 +6118,8 @@
             }
             // 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());
@@ -5554,11 +6179,11 @@
             }
             // 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);
             }
@@ -5577,11 +6202,11 @@
                     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 = 'Choose files or drag them here', helperText, showPreview = true, className = '', error, } = attrs;
                 return m('.file-upload-container', { class: className }, [
                     // Upload area
                     m('.file-upload-area', {
@@ -5589,8 +6214,10 @@
                             state.isDragOver ? 'drag-over' : '',
                             disabled ? 'disabled' : '',
                             error ? 'error' : '',
-                            state.files.length > 0 ? 'has-files' : ''
-                        ].filter(Boolean).join(' '),
+                            state.files.length > 0 ? 'has-files' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ') || undefined,
                         ondragover: (e) => {
                             if (disabled)
                                 return;
@@ -5621,7 +6248,7 @@
                                 return;
                             const input = document.getElementById(state.id);
                             input === null || input === void 0 ? void 0 : input.click();
-                        }
+                        },
                     }, [
                         m('input[type="file"]', {
                             id: state.id,
@@ -5634,57 +6261,55 @@
                                 if (target.files) {
                                     handleFiles(target.files, attrs);
                                 }
-                            }
+                            },
                         }),
                         m('.file-upload-content', [
                             m('i.material-icons.file-upload-icon', 'cloud_upload'),
                             m('p.file-upload-label', label),
                             helperText && m('p.file-upload-helper', helperText),
-                            accept && m('p.file-upload-types', `Accepted: ${accept}`)
-                        ])
+                            accept && m('p.file-upload-types', `Accepted: ${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', '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}%` },
+                                                }),
+                                            ]),
+                                        ]),
+                                    // 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: 'Remove file',
+                                }, [m('i.material-icons', 'close')]),
+                            ])),
+                        ]),
                 ]);
-            }
+            },
         };
     };
 
@@ -5714,7 +6339,7 @@
                 state = {
                     id: attrs.id || uniqueId(),
                     isOpen: attrs.isOpen || false,
-                    isAnimating: false
+                    isAnimating: false,
                 };
                 // Set up keyboard listener
                 if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
@@ -5743,34 +6368,33 @@
                 }
             },
             view: ({ attrs, children }) => {
-                const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false } = attrs;
+                const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, } = attrs;
                 const isOpen = state.isOpen;
                 return [
                     // Backdrop (using existing materialize class)
-                    showBackdrop && mode === 'overlay' && m('.sidenav-overlay', {
-                        style: {
-                            display: isOpen ? 'block' : 'none',
-                            opacity: isOpen ? '1' : '0'
-                        },
-                        onclick: () => handleBackdropClick(attrs)
-                    }),
+                    showBackdrop &&
+                        mode === 'overlay' &&
+                        m('.sidenav-overlay', {
+                            style: {
+                                display: isOpen ? 'block' : 'none',
+                                opacity: isOpen ? '1' : '0',
+                            },
+                            onclick: () => handleBackdropClick(attrs),
+                        }),
                     // Sidenav (using existing materialize structure)
                     m('ul.sidenav', {
                         id: state.id,
-                        class: [
-                            position === 'right' ? 'right-aligned' : '',
-                            fixed ? 'sidenav-fixed' : '',
-                            className
-                        ].filter(Boolean).join(' '),
+                        class: [position === 'right' ? 'right-aligned' : '', fixed ? 'sidenav-fixed' : '', className]
+                            .filter(Boolean)
+                            .join(' ') || undefined,
                         style: {
                             width: `${width}px`,
-                            transform: isOpen ? 'translateX(0)' :
-                                position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
-                            'transition-duration': `${animationDuration}ms`
-                        }
-                    }, children)
+                            transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
+                            'transition-duration': `${animationDuration}ms`,
+                        },
+                    }, children),
                 ];
-            }
+            },
         };
     };
     /**
@@ -5780,37 +6404,30 @@
     const SidenavItem = () => {
         return {
             view: ({ attrs, children }) => {
-                const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false } = attrs;
+                const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, } = attrs;
                 if (divider) {
                     return m('li.divider');
                 }
                 if (subheader) {
                     return m('li.subheader', text || children);
                 }
-                const itemClasses = [
-                    active ? 'active' : '',
-                    disabled ? 'disabled' : '',
-                    className
-                ].filter(Boolean).join(' ');
-                const content = [
-                    icon && m('i.material-icons', icon),
-                    text || children
-                ];
+                const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', className].filter(Boolean).join(' ') || undefined;
+                const content = [icon && m('i.material-icons', icon), text || children];
                 if (href && !disabled) {
                     return m('li', { class: itemClasses }, [
                         m('a', {
                             href,
-                            onclick: disabled ? undefined : onclick
-                        }, content)
+                            onclick: disabled ? undefined : onclick,
+                        }, content),
                     ]);
                 }
                 return m('li', { class: itemClasses }, [
                     m('a', {
                         onclick: disabled ? undefined : onclick,
-                        href: '#!'
-                    }, content)
+                        href: '#!',
+                    }, content),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -5861,7 +6478,7 @@
     const Breadcrumb = () => {
         return {
             view: ({ attrs }) => {
-                const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false } = attrs;
+                const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false, } = attrs;
                 if (items.length === 0) {
                     return null;
                 }
@@ -5870,52 +6487,46 @@
                 if (maxItems && items.length > maxItems) {
                     const firstItem = items[0];
                     const lastItems = items.slice(-(maxItems - 2));
-                    displayItems = [
-                        firstItem,
-                        { text: '...', disabled: true, className: 'breadcrumb-ellipsis' },
-                        ...lastItems
-                    ];
+                    displayItems = [firstItem, { text: '...', disabled: true, className: 'breadcrumb-ellipsis' }, ...lastItems];
                 }
                 return m('nav.breadcrumb', { class: className }, [
-                    m('ol.breadcrumb-list', displayItems.map((item, index) => {
+                    m('ol.breadcrumb-list', displayItems
+                        .map((item, index) => {
                         const isLast = index === displayItems.length - 1;
                         const isFirst = index === 0;
                         return [
                             // Breadcrumb item
                             m('li.breadcrumb-item', {
-                                class: [
-                                    item.active || isLast ? 'active' : '',
-                                    item.disabled ? 'disabled' : '',
-                                    item.className || ''
-                                ].filter(Boolean).join(' ')
+                                class: [item.active || isLast ? 'active' : '', item.disabled ? 'disabled' : '', item.className || '']
+                                    .filter(Boolean)
+                                    .join(' ') || undefined,
                             }, [
-                                item.href && !item.disabled && !isLast ?
-                                    // Link item
-                                    m('a.breadcrumb-link', {
-                                        href: item.href,
-                                        onclick: item.onclick
-                                    }, [
-                                        (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                        (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                        m('span.breadcrumb-text', item.text)
-                                    ]) :
-                                    // Text item (active or disabled)
-                                    m('span.breadcrumb-text', {
-                                        onclick: item.disabled ? undefined : item.onclick
-                                    }, [
-                                        (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                        (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                        item.text
-                                    ])
+                                item.href && !item.disabled && !isLast
+                                    ? // Link item
+                                        m('a.breadcrumb-link', {
+                                            href: item.href,
+                                            onclick: item.onclick,
+                                        }, [
+                                            showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                            showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                            m('span.breadcrumb-text', item.text),
+                                        ])
+                                    : // Text item (active or disabled)
+                                        m('span.breadcrumb-text', {
+                                            onclick: item.disabled ? undefined : item.onclick,
+                                        }, [
+                                            showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                            showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                            item.text,
+                                        ]),
                             ]),
                             // Separator (except for last item)
-                            !isLast && m('li.breadcrumb-separator', [
-                                m('i.material-icons', separator)
-                            ])
+                            !isLast && m('li.breadcrumb-separator', [m('i.material-icons', separator)]),
                         ];
-                    }).reduce((acc, val) => acc.concat(val), []))
+                    })
+                        .reduce((acc, val) => acc.concat(val), [])),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -5928,7 +6539,7 @@
         items.push({
             text: 'Home',
             href: basePath,
-            icon: 'home'
+            icon: 'home',
         });
         // Add path segments
         let currentPath = basePath;
@@ -5938,7 +6549,7 @@
             items.push({
                 text: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
                 href: isLast ? undefined : currentPath,
-                active: isLast
+                active: isLast,
             });
         });
         return items;
@@ -5957,19 +6568,18 @@
             items.push({
                 text: 'Home',
                 href: '/',
-                icon: 'home'
+                icon: 'home',
             });
             let currentPath = '';
             segments.forEach((segment, index) => {
                 currentPath += '/' + segment;
                 const isLast = index === segments.length - 1;
                 // Use custom text from config or format segment
-                const text = routeConfig[currentPath] ||
-                    segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
+                const text = routeConfig[currentPath] || segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
                 items.push({
                     text,
                     href: isLast ? undefined : currentPath,
-                    active: isLast
+                    active: isLast,
                 });
             });
             return items;
@@ -5981,7 +6591,7 @@
             return hierarchy.map((item, index) => ({
                 text: item[textKey],
                 href: index === hierarchy.length - 1 ? undefined : item[pathKey],
-                active: index === hierarchy.length - 1
+                active: index === hierarchy.length - 1,
             }));
         }
     }
@@ -6115,7 +6725,7 @@
                                     hasError ? 'error' : '',
                                     step.disabled ? 'disabled' : '',
                                     step.optional ? 'optional' : ''
-                                ].filter(Boolean).join(' '),
+                                ].filter(Boolean).join(' ') || undefined,
                                 onclick: allowHeaderNavigation && !step.disabled ?
                                     () => goToStep(index, attrs) : undefined
                             }, [
@@ -6189,6 +6799,313 @@
         };
     };
 
+    // 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)),
+                ]);
+            },
+        };
+    };
+
+    /**
+     * @fileoverview Core TypeScript utility types for mithril-materialized library
+     * These types improve type safety and developer experience across all components
+     */
+    /**
+     * Type guard to check if validation result indicates success
+     * @param result - The validation result to check
+     * @returns True if validation passed
+     */
+    const isValidationSuccess = (result) => result === true || result === '';
+    /**
+     * Type guard to check if validation result indicates an error
+     * @param result - The validation result to check
+     * @returns True if validation failed
+     */
+    const isValidationError = (result) => !isValidationSuccess(result);
+    // ============================================================================
+    // EXPORTS
+    // ============================================================================
+    // All types are already exported via individual export declarations above
+
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
     exports.Breadcrumb = Breadcrumb;
@@ -6203,6 +7120,7 @@
     exports.CollapsibleItem = CollapsibleItem;
     exports.Collection = Collection;
     exports.ColorInput = ColorInput;
+    exports.DataTable = DataTable;
     exports.DatePicker = DatePicker;
     exports.Dropdown = Dropdown;
     exports.EmailInput = EmailInput;
@@ -6218,10 +7136,12 @@
     exports.ListItem = ListItem;
     exports.Mandatory = Mandatory;
     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;
@@ -6251,6 +7171,7 @@
     exports.ToastComponent = ToastComponent;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
+    exports.TreeView = TreeView;
     exports.UrlInput = UrlInput;
     exports.Wizard = Wizard;
     exports.createBreadcrumb = createBreadcrumb;
@@ -6258,6 +7179,8 @@
     exports.initPushpins = initPushpins;
     exports.initTooltips = initTooltips;
     exports.isNumeric = isNumeric;
+    exports.isValidationError = isValidationError;
+    exports.isValidationSuccess = isValidationSuccess;
     exports.padLeft = padLeft;
     exports.range = range;
     exports.toast = toast;