mithril-materialized 2.0.0-rc.1 → 2.0.0

package/dist/file-upload.d.ts

@@ -1,4 +1,25 @@
 import { FactoryComponent, Attributes } from 'mithril';
+export interface FileUploadI18n {
+    /** Default label text for upload area */
+    label?: string;
+    /** Text for selected files section */
+    selectedFiles?: string;
+    /** Text for accepted file types */
+    acceptedTypes?: string;
+    /** Remove file button title */
+    removeFile?: string;
+    /** File size limit error message template (use {maxSize} placeholder) */
+    fileSizeExceeds?: string;
+    /** File type not accepted error message template (use {accept} placeholder) */
+    fileTypeNotAccepted?: string;
+    /** File size units */
+    fileSizeUnits?: {
+        bytes?: string;
+        kb?: string;
+        mb?: string;
+        gb?: string;
+    };
+}
 export interface FileUploadAttrs extends Attributes {
     /** Accept specific file types (e.g., "image/*", ".pdf,.doc") */
     accept?: string;
@@ -26,6 +47,8 @@ export interface FileUploadAttrs extends Attributes {
     className?: string;
     /** Validation error message */
     error?: string;
+    /** Internationalization */
+    i18n?: FileUploadI18n;
 }
 /**
  * File Upload Component with Drag and Drop

package/dist/floating-action-button.d.ts

@@ -22,7 +22,7 @@ export interface FloatingActionButtonAttrs {
         /** Classes of the icon */
         iconClass?: string;
         /** On click function */
-        onClick?: (e: UIEvent) => void;
+        onclick?: (e: UIEvent) => void;
     }>;
     /** Direction to open the buttons */
     direction?: 'top' | 'bottom' | 'left' | 'right';

package/dist/index.esm.js

@@ -1350,7 +1350,7 @@ const Collection = () => {
     };
 };
 
-const defaultI18n = {
+const defaultI18n$2 = {
     cancel: 'Cancel',
     clear: 'Clear',
     done: 'Ok',
@@ -1458,9 +1458,9 @@ const DatePicker = () => {
         else if (attrs.displayFormat) {
             finalFormat = attrs.displayFormat;
         }
-        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
+        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$2, onSelect: null, onOpen: null, onClose: null }, attrs);
         // Merge i18n properly
-        merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+        merged.i18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
         return merged;
     };
     const toString = (date, format) => {
@@ -4083,8 +4083,8 @@ const FloatingActionButton = () => {
                         },
                         onclick: (e) => {
                             e.stopPropagation();
-                            if (button.onClick)
-                                button.onClick(e);
+                            if (button.onclick)
+                                button.onclick(e);
                         },
                     }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
             ]));
@@ -6673,6 +6673,17 @@ const initTooltips = (selector = '[data-tooltip]', options = {}) => {
     return tooltips;
 };
 
+const defaultI18n$1 = {
+    theme: 'Theme:',
+    light: 'Light',
+    dark: 'Dark',
+    auto: 'Auto',
+    lightTitle: 'Light theme',
+    darkTitle: 'Dark theme',
+    autoTitle: 'Auto theme (system preference)',
+    switchToDark: 'Switch to dark theme',
+    switchToLight: 'Switch to light theme',
+};
 /**
  * Theme switching utilities and component
  */
@@ -6755,44 +6766,36 @@ const ThemeSwitcher = () => {
                 ThemeManager.initialize();
             }
         },
-        view: ({ attrs }) => {
-            const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className = '' } = attrs;
+        view: ({ attrs = {} }) => {
+            const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className, i18n } = attrs;
+            const labels = Object.assign(Object.assign({}, defaultI18n$1), i18n);
             const handleThemeChange = (newTheme) => {
                 ThemeManager.setTheme(newTheme);
                 if (onThemeChange) {
                     onThemeChange(newTheme);
                 }
             };
-            return m('.theme-switcher', { class: className }, [
-                showLabels && m('span.theme-switcher-label', 'Theme:'),
+            return m('.theme-switcher', { className }, [
+                showLabels && m('span.theme-switcher-label', labels.theme),
                 m('.theme-switcher-buttons', [
                     m('button.btn-flat', {
                         class: theme === 'light' ? 'active' : '',
                         onclick: () => handleThemeChange('light'),
-                        title: 'Light theme'
-                    }, [
-                        m('i.material-icons', 'light_mode'),
-                        showLabels && m('span', 'Light')
-                    ]),
+                        title: labels.lightTitle,
+                    }, [m('i.material-icons', 'light_mode'), showLabels && m('span', labels.light)]),
                     m('button.btn-flat', {
                         class: theme === 'auto' ? 'active' : '',
                         onclick: () => handleThemeChange('auto'),
-                        title: 'Auto theme (system preference)'
-                    }, [
-                        m('i.material-icons', 'brightness_auto'),
-                        showLabels && m('span', 'Auto')
-                    ]),
+                        title: labels.autoTitle,
+                    }, [m('i.material-icons', 'brightness_auto'), showLabels && m('span', labels.auto)]),
                     m('button.btn-flat', {
                         class: theme === 'dark' ? 'active' : '',
                         onclick: () => handleThemeChange('dark'),
-                        title: 'Dark theme'
-                    }, [
-                        m('i.material-icons', 'dark_mode'),
-                        showLabels && m('span', 'Dark')
-                    ])
-                ])
+                        title: labels.darkTitle,
+                    }, [m('i.material-icons', 'dark_mode'), showLabels && m('span', labels.dark)]),
+                ]),
             ]);
-        }
+        },
     };
 };
 /**
@@ -6806,36 +6809,50 @@ const ThemeToggle = () => {
                 ThemeManager.initialize();
             }
         },
-        view: ({ attrs }) => {
+        view: ({ attrs = {} }) => {
             const currentTheme = ThemeManager.getEffectiveTheme();
+            const labels = Object.assign(Object.assign({}, defaultI18n$1), attrs.i18n);
             return m('button.btn-flat.theme-toggle', {
                 class: attrs.className || '',
                 onclick: () => {
                     ThemeManager.toggle();
-                    m.redraw();
                 },
-                title: `Switch to ${currentTheme === 'light' ? 'dark' : 'light'} theme`,
-                style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;'
+                title: currentTheme === 'light' ? labels.switchToDark : labels.switchToLight,
+                style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;',
             }, [
                 m('i.material-icons', {
-                    style: 'color: inherit; font-size: 24px;'
-                }, currentTheme === 'light' ? 'dark_mode' : 'light_mode')
+                    style: 'color: inherit; font-size: 24px;',
+                }, currentTheme === 'light' ? 'dark_mode' : 'light_mode'),
             ]);
-        }
+        },
     };
 };
 
+const defaultI18n = {
+    label: 'Choose files or drag them here',
+    selectedFiles: 'Selected Files:',
+    acceptedTypes: 'Accepted:',
+    removeFile: 'Remove file',
+    fileSizeExceeds: 'File size exceeds {maxSize}MB limit',
+    fileTypeNotAccepted: 'File type not accepted. Accepted: {accept}',
+    fileSizeUnits: {
+        bytes: 'B',
+        kb: 'KB',
+        mb: 'MB',
+        gb: 'GB',
+    },
+};
 /**
  * File Upload Component with Drag and Drop
  * Supports multiple files, file type validation, size limits, and image preview
  */
 const FileUpload = () => {
     let state;
-    const validateFile = (file, attrs) => {
+    const validateFile = (file, attrs, labels) => {
         // Check file size
         if (attrs.maxSize && file.size > attrs.maxSize) {
             const maxSizeMB = (attrs.maxSize / (1024 * 1024)).toFixed(1);
-            return `File size exceeds ${maxSizeMB}MB limit`;
+            return labels.fileSizeExceeds.replace('{maxSize}', maxSizeMB);
         }
         // Check file type
         if (attrs.accept) {
@@ -6851,7 +6868,7 @@ const FileUpload = () => {
                 }
             });
             if (!isAccepted) {
-                return `File type not accepted. Accepted: ${attrs.accept}`;
+                return labels.fileTypeNotAccepted.replace('{accept}', attrs.accept);
             }
         }
         return null;
@@ -6867,12 +6884,12 @@ const FileUpload = () => {
             reader.readAsDataURL(file);
         }
     };
-    const handleFiles = (fileList, attrs) => {
+    const handleFiles = (fileList, attrs, labels) => {
         const newFiles = Array.from(fileList);
         const validFiles = [];
         // Validate each file
         for (const file of newFiles) {
-            const error = validateFile(file, attrs);
+            const error = validateFile(file, attrs, labels);
             if (error) {
                 file.uploadError = error;
             }
@@ -6909,11 +6926,11 @@ const FileUpload = () => {
             attrs.onFileRemoved(fileToRemove);
         }
     };
-    const formatFileSize = (bytes) => {
+    const formatFileSize = (bytes, labels) => {
         if (bytes === 0)
-            return '0 B';
+            return `0 ${labels.fileSizeUnits.bytes}`;
         const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const sizes = [labels.fileSizeUnits.bytes, labels.fileSizeUnits.kb, labels.fileSizeUnits.mb, labels.fileSizeUnits.gb];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
     };
@@ -6927,7 +6944,9 @@ const FileUpload = () => {
             };
         },
         view: ({ attrs }) => {
-            const { accept, multiple = false, disabled = false, label = 'Choose files or drag them here', helperText, showPreview = true, className = '', error, } = attrs;
+            const { accept, multiple = false, disabled = false, label, helperText, showPreview = true, className = '', error, i18n, } = attrs;
+            const labels = Object.assign(Object.assign({}, defaultI18n), i18n);
+            const displayLabel = label || labels.label;
             return m('.file-upload-container', { class: className }, [
                 // Upload area
                 m('.file-upload-area', {
@@ -6961,7 +6980,7 @@ const FileUpload = () => {
                         e.stopPropagation();
                         state.isDragOver = false;
                         if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
-                            handleFiles(e.dataTransfer.files, attrs);
+                            handleFiles(e.dataTransfer.files, attrs, labels);
                         }
                     },
                     onclick: () => {
@@ -6980,15 +6999,15 @@ const FileUpload = () => {
                         onchange: (e) => {
                             const target = e.target;
                             if (target.files) {
-                                handleFiles(target.files, attrs);
+                                handleFiles(target.files, attrs, labels);
                             }
                         },
                     }),
                     m('.file-upload-content', [
                         m('i.material-icons.file-upload-icon', 'cloud_upload'),
-                        m('p.file-upload-label', label),
+                        m('p.file-upload-label', displayLabel),
                         helperText && m('p.file-upload-helper', helperText),
-                        accept && m('p.file-upload-types', `Accepted: ${accept}`),
+                        accept && m('p.file-upload-types', `${labels.acceptedTypes} ${accept}`),
                     ]),
                 ]),
                 // Error message
@@ -6996,7 +7015,7 @@ const FileUpload = () => {
                 // File list
                 state.files.length > 0 &&
                     m('.file-upload-list', [
-                        m('h6', 'Selected Files:'),
+                        m('h6', labels.selectedFiles),
                         state.files.map((file) => m('.file-upload-item', { key: file.name + file.size }, [
                             // Preview thumbnail
                             showPreview && file.preview && m('.file-preview', [m('img', { src: file.preview, alt: file.name })]),
@@ -7004,7 +7023,7 @@ const FileUpload = () => {
                             m('.file-info', [
                                 m('.file-name', file.name),
                                 m('.file-details', [
-                                    m('span.file-size', formatFileSize(file.size)),
+                                    m('span.file-size', formatFileSize(file.size, labels)),
                                     file.type && m('span.file-type', file.type),
                                 ]),
                                 // Progress bar (if uploading)
@@ -7025,7 +7044,7 @@ const FileUpload = () => {
                                     e.stopPropagation();
                                     removeFile(file, attrs);
                                 },
-                                title: 'Remove file',
+                                title: labels.removeFile,
                             }, [m('i.material-icons', 'close')]),
                         ])),
                     ]),
@@ -7866,18 +7885,18 @@ const Timeline = () => {
                     const handleItemClick = (e) => {
                         if (item.disabled)
                             return;
-                        if (item.onClick) {
+                        if (item.onclick) {
                             e.preventDefault();
-                            item.onClick(item, e);
+                            item.onclick(item, e);
                         }
                     };
                     const isVertical = orientation === 'vertical';
                     return m('div', {
                         key: item.id || index,
                         className: itemClasses,
-                        onclick: item.onClick ? handleItemClick : undefined,
-                        role: item.onClick ? 'button' : undefined,
-                        tabindex: item.onClick && !item.disabled ? 0 : undefined,
+                        onclick: item.onclick ? handleItemClick : undefined,
+                        role: item.onclick ? 'button' : undefined,
+                        tabindex: item.onclick && !item.disabled ? 0 : undefined,
                         'aria-disabled': item.disabled ? 'true' : undefined,
                     }, [
                         // Timestamp (on opposite side of content from bullet)

package/dist/index.js

@@ -1352,7 +1352,7 @@ const Collection = () => {
     };
 };
 
-const defaultI18n = {
+const defaultI18n$2 = {
     cancel: 'Cancel',
     clear: 'Clear',
     done: 'Ok',
@@ -1460,9 +1460,9 @@ const DatePicker = () => {
         else if (attrs.displayFormat) {
             finalFormat = attrs.displayFormat;
         }
-        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
+        const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$2, onSelect: null, onOpen: null, onClose: null }, attrs);
         // Merge i18n properly
-        merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+        merged.i18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
         return merged;
     };
     const toString = (date, format) => {
@@ -4085,8 +4085,8 @@ const FloatingActionButton = () => {
                         },
                         onclick: (e) => {
                             e.stopPropagation();
-                            if (button.onClick)
-                                button.onClick(e);
+                            if (button.onclick)
+                                button.onclick(e);
                         },
                     }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
             ]));
@@ -6675,6 +6675,17 @@ const initTooltips = (selector = '[data-tooltip]', options = {}) => {
     return tooltips;
 };
 
+const defaultI18n$1 = {
+    theme: 'Theme:',
+    light: 'Light',
+    dark: 'Dark',
+    auto: 'Auto',
+    lightTitle: 'Light theme',
+    darkTitle: 'Dark theme',
+    autoTitle: 'Auto theme (system preference)',
+    switchToDark: 'Switch to dark theme',
+    switchToLight: 'Switch to light theme',
+};
 /**
  * Theme switching utilities and component
  */
@@ -6757,44 +6768,36 @@ const ThemeSwitcher = () => {
                 ThemeManager.initialize();
             }
         },
-        view: ({ attrs }) => {
-            const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className = '' } = attrs;
+        view: ({ attrs = {} }) => {
+            const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className, i18n } = attrs;
+            const labels = Object.assign(Object.assign({}, defaultI18n$1), i18n);
             const handleThemeChange = (newTheme) => {
                 ThemeManager.setTheme(newTheme);
                 if (onThemeChange) {
                     onThemeChange(newTheme);
                 }
             };
-            return m('.theme-switcher', { class: className }, [
-                showLabels && m('span.theme-switcher-label', 'Theme:'),
+            return m('.theme-switcher', { className }, [
+                showLabels && m('span.theme-switcher-label', labels.theme),
                 m('.theme-switcher-buttons', [
                     m('button.btn-flat', {
                         class: theme === 'light' ? 'active' : '',
                         onclick: () => handleThemeChange('light'),
-                        title: 'Light theme'
-                    }, [
-                        m('i.material-icons', 'light_mode'),
-                        showLabels && m('span', 'Light')
-                    ]),
+                        title: labels.lightTitle,
+                    }, [m('i.material-icons', 'light_mode'), showLabels && m('span', labels.light)]),
                     m('button.btn-flat', {
                         class: theme === 'auto' ? 'active' : '',
                         onclick: () => handleThemeChange('auto'),
-                        title: 'Auto theme (system preference)'
-                    }, [
-                        m('i.material-icons', 'brightness_auto'),
-                        showLabels && m('span', 'Auto')
-                    ]),
+                        title: labels.autoTitle,
+                    }, [m('i.material-icons', 'brightness_auto'), showLabels && m('span', labels.auto)]),
                     m('button.btn-flat', {
                         class: theme === 'dark' ? 'active' : '',
                         onclick: () => handleThemeChange('dark'),
-                        title: 'Dark theme'
-                    }, [
-                        m('i.material-icons', 'dark_mode'),
-                        showLabels && m('span', 'Dark')
-                    ])
-                ])
+                        title: labels.darkTitle,
+                    }, [m('i.material-icons', 'dark_mode'), showLabels && m('span', labels.dark)]),
+                ]),
             ]);
-        }
+        },
     };
 };
 /**
@@ -6808,36 +6811,50 @@ const ThemeToggle = () => {
                 ThemeManager.initialize();
             }
         },
-        view: ({ attrs }) => {
+        view: ({ attrs = {} }) => {
             const currentTheme = ThemeManager.getEffectiveTheme();
+            const labels = Object.assign(Object.assign({}, defaultI18n$1), attrs.i18n);
             return m('button.btn-flat.theme-toggle', {
                 class: attrs.className || '',
                 onclick: () => {
                     ThemeManager.toggle();
-                    m.redraw();
                 },
-                title: `Switch to ${currentTheme === 'light' ? 'dark' : 'light'} theme`,
-                style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;'
+                title: currentTheme === 'light' ? labels.switchToDark : labels.switchToLight,
+                style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;',
             }, [
                 m('i.material-icons', {
-                    style: 'color: inherit; font-size: 24px;'
-                }, currentTheme === 'light' ? 'dark_mode' : 'light_mode')
+                    style: 'color: inherit; font-size: 24px;',
+                }, currentTheme === 'light' ? 'dark_mode' : 'light_mode'),
             ]);
-        }
+        },
     };
 };
 
+const defaultI18n = {
+    label: 'Choose files or drag them here',
+    selectedFiles: 'Selected Files:',
+    acceptedTypes: 'Accepted:',
+    removeFile: 'Remove file',
+    fileSizeExceeds: 'File size exceeds {maxSize}MB limit',
+    fileTypeNotAccepted: 'File type not accepted. Accepted: {accept}',
+    fileSizeUnits: {
+        bytes: 'B',
+        kb: 'KB',
+        mb: 'MB',
+        gb: 'GB',
+    },
+};
 /**
  * File Upload Component with Drag and Drop
  * Supports multiple files, file type validation, size limits, and image preview
  */
 const FileUpload = () => {
     let state;
-    const validateFile = (file, attrs) => {
+    const validateFile = (file, attrs, labels) => {
         // Check file size
         if (attrs.maxSize && file.size > attrs.maxSize) {
             const maxSizeMB = (attrs.maxSize / (1024 * 1024)).toFixed(1);
-            return `File size exceeds ${maxSizeMB}MB limit`;
+            return labels.fileSizeExceeds.replace('{maxSize}', maxSizeMB);
         }
         // Check file type
         if (attrs.accept) {
@@ -6853,7 +6870,7 @@ const FileUpload = () => {
                 }
             });
             if (!isAccepted) {
-                return `File type not accepted. Accepted: ${attrs.accept}`;
+                return labels.fileTypeNotAccepted.replace('{accept}', attrs.accept);
             }
         }
         return null;
@@ -6869,12 +6886,12 @@ const FileUpload = () => {
             reader.readAsDataURL(file);
         }
     };
-    const handleFiles = (fileList, attrs) => {
+    const handleFiles = (fileList, attrs, labels) => {
         const newFiles = Array.from(fileList);
         const validFiles = [];
         // Validate each file
         for (const file of newFiles) {
-            const error = validateFile(file, attrs);
+            const error = validateFile(file, attrs, labels);
             if (error) {
                 file.uploadError = error;
             }
@@ -6911,11 +6928,11 @@ const FileUpload = () => {
             attrs.onFileRemoved(fileToRemove);
         }
     };
-    const formatFileSize = (bytes) => {
+    const formatFileSize = (bytes, labels) => {
         if (bytes === 0)
-            return '0 B';
+            return `0 ${labels.fileSizeUnits.bytes}`;
         const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const sizes = [labels.fileSizeUnits.bytes, labels.fileSizeUnits.kb, labels.fileSizeUnits.mb, labels.fileSizeUnits.gb];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
     };
@@ -6929,7 +6946,9 @@ const FileUpload = () => {
             };
         },
         view: ({ attrs }) => {
-            const { accept, multiple = false, disabled = false, label = 'Choose files or drag them here', helperText, showPreview = true, className = '', error, } = attrs;
+            const { accept, multiple = false, disabled = false, label, helperText, showPreview = true, className = '', error, i18n, } = attrs;
+            const labels = Object.assign(Object.assign({}, defaultI18n), i18n);
+            const displayLabel = label || labels.label;
             return m('.file-upload-container', { class: className }, [
                 // Upload area
                 m('.file-upload-area', {
@@ -6963,7 +6982,7 @@ const FileUpload = () => {
                         e.stopPropagation();
                         state.isDragOver = false;
                         if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
-                            handleFiles(e.dataTransfer.files, attrs);
+                            handleFiles(e.dataTransfer.files, attrs, labels);
                         }
                     },
                     onclick: () => {
@@ -6982,15 +7001,15 @@ const FileUpload = () => {
                         onchange: (e) => {
                             const target = e.target;
                             if (target.files) {
-                                handleFiles(target.files, attrs);
+                                handleFiles(target.files, attrs, labels);
                             }
                         },
                     }),
                     m('.file-upload-content', [
                         m('i.material-icons.file-upload-icon', 'cloud_upload'),
-                        m('p.file-upload-label', label),
+                        m('p.file-upload-label', displayLabel),
                         helperText && m('p.file-upload-helper', helperText),
-                        accept && m('p.file-upload-types', `Accepted: ${accept}`),
+                        accept && m('p.file-upload-types', `${labels.acceptedTypes} ${accept}`),
                     ]),
                 ]),
                 // Error message
@@ -6998,7 +7017,7 @@ const FileUpload = () => {
                 // File list
                 state.files.length > 0 &&
                     m('.file-upload-list', [
-                        m('h6', 'Selected Files:'),
+                        m('h6', labels.selectedFiles),
                         state.files.map((file) => m('.file-upload-item', { key: file.name + file.size }, [
                             // Preview thumbnail
                             showPreview && file.preview && m('.file-preview', [m('img', { src: file.preview, alt: file.name })]),
@@ -7006,7 +7025,7 @@ const FileUpload = () => {
                             m('.file-info', [
                                 m('.file-name', file.name),
                                 m('.file-details', [
-                                    m('span.file-size', formatFileSize(file.size)),
+                                    m('span.file-size', formatFileSize(file.size, labels)),
                                     file.type && m('span.file-type', file.type),
                                 ]),
                                 // Progress bar (if uploading)
@@ -7027,7 +7046,7 @@ const FileUpload = () => {
                                     e.stopPropagation();
                                     removeFile(file, attrs);
                                 },
-                                title: 'Remove file',
+                                title: labels.removeFile,
                             }, [m('i.material-icons', 'close')]),
                         ])),
                     ]),
@@ -7868,18 +7887,18 @@ const Timeline = () => {
                     const handleItemClick = (e) => {
                         if (item.disabled)
                             return;
-                        if (item.onClick) {
+                        if (item.onclick) {
                             e.preventDefault();
-                            item.onClick(item, e);
+                            item.onclick(item, e);
                         }
                     };
                     const isVertical = orientation === 'vertical';
                     return m('div', {
                         key: item.id || index,
                         className: itemClasses,
-                        onclick: item.onClick ? handleItemClick : undefined,
-                        role: item.onClick ? 'button' : undefined,
-                        tabindex: item.onClick && !item.disabled ? 0 : undefined,
+                        onclick: item.onclick ? handleItemClick : undefined,
+                        role: item.onclick ? 'button' : undefined,
+                        tabindex: item.onclick && !item.disabled ? 0 : undefined,
                         'aria-disabled': item.disabled ? 'true' : undefined,
                     }, [
                         // Timestamp (on opposite side of content from bullet)

package/dist/index.umd.js

@@ -1354,7 +1354,7 @@
         };
     };
 
-    const defaultI18n = {
+    const defaultI18n$2 = {
         cancel: 'Cancel',
         clear: 'Clear',
         done: 'Ok',
@@ -1462,9 +1462,9 @@
             else if (attrs.displayFormat) {
                 finalFormat = attrs.displayFormat;
             }
-            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
+            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$2, onSelect: null, onOpen: null, onClose: null }, attrs);
             // Merge i18n properly
-            merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+            merged.i18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
             return merged;
         };
         const toString = (date, format) => {
@@ -4087,8 +4087,8 @@
                             },
                             onclick: (e) => {
                                 e.stopPropagation();
-                                if (button.onClick)
-                                    button.onClick(e);
+                                if (button.onclick)
+                                    button.onclick(e);
                             },
                         }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
                 ]));
@@ -6677,6 +6677,17 @@
         return tooltips;
     };
 
+    const defaultI18n$1 = {
+        theme: 'Theme:',
+        light: 'Light',
+        dark: 'Dark',
+        auto: 'Auto',
+        lightTitle: 'Light theme',
+        darkTitle: 'Dark theme',
+        autoTitle: 'Auto theme (system preference)',
+        switchToDark: 'Switch to dark theme',
+        switchToLight: 'Switch to light theme',
+    };
     /**
      * Theme switching utilities and component
      */
@@ -6759,44 +6770,36 @@
                     ThemeManager.initialize();
                 }
             },
-            view: ({ attrs }) => {
-                const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className = '' } = attrs;
+            view: ({ attrs = {} }) => {
+                const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className, i18n } = attrs;
+                const labels = Object.assign(Object.assign({}, defaultI18n$1), i18n);
                 const handleThemeChange = (newTheme) => {
                     ThemeManager.setTheme(newTheme);
                     if (onThemeChange) {
                         onThemeChange(newTheme);
                     }
                 };
-                return m('.theme-switcher', { class: className }, [
-                    showLabels && m('span.theme-switcher-label', 'Theme:'),
+                return m('.theme-switcher', { className }, [
+                    showLabels && m('span.theme-switcher-label', labels.theme),
                     m('.theme-switcher-buttons', [
                         m('button.btn-flat', {
                             class: theme === 'light' ? 'active' : '',
                             onclick: () => handleThemeChange('light'),
-                            title: 'Light theme'
-                        }, [
-                            m('i.material-icons', 'light_mode'),
-                            showLabels && m('span', 'Light')
-                        ]),
+                            title: labels.lightTitle,
+                        }, [m('i.material-icons', 'light_mode'), showLabels && m('span', labels.light)]),
                         m('button.btn-flat', {
                             class: theme === 'auto' ? 'active' : '',
                             onclick: () => handleThemeChange('auto'),
-                            title: 'Auto theme (system preference)'
-                        }, [
-                            m('i.material-icons', 'brightness_auto'),
-                            showLabels && m('span', 'Auto')
-                        ]),
+                            title: labels.autoTitle,
+                        }, [m('i.material-icons', 'brightness_auto'), showLabels && m('span', labels.auto)]),
                         m('button.btn-flat', {
                             class: theme === 'dark' ? 'active' : '',
                             onclick: () => handleThemeChange('dark'),
-                            title: 'Dark theme'
-                        }, [
-                            m('i.material-icons', 'dark_mode'),
-                            showLabels && m('span', 'Dark')
-                        ])
-                    ])
+                            title: labels.darkTitle,
+                        }, [m('i.material-icons', 'dark_mode'), showLabels && m('span', labels.dark)]),
+                    ]),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -6810,36 +6813,50 @@
                     ThemeManager.initialize();
                 }
             },
-            view: ({ attrs }) => {
+            view: ({ attrs = {} }) => {
                 const currentTheme = ThemeManager.getEffectiveTheme();
+                const labels = Object.assign(Object.assign({}, defaultI18n$1), attrs.i18n);
                 return m('button.btn-flat.theme-toggle', {
                     class: attrs.className || '',
                     onclick: () => {
                         ThemeManager.toggle();
-                        m.redraw();
                     },
-                    title: `Switch to ${currentTheme === 'light' ? 'dark' : 'light'} theme`,
-                    style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;'
+                    title: currentTheme === 'light' ? labels.switchToDark : labels.switchToLight,
+                    style: 'margin: 0; height: 64px; line-height: 64px; border-radius: 0; min-width: 64px; padding: 0;',
                 }, [
                     m('i.material-icons', {
-                        style: 'color: inherit; font-size: 24px;'
-                    }, currentTheme === 'light' ? 'dark_mode' : 'light_mode')
+                        style: 'color: inherit; font-size: 24px;',
+                    }, currentTheme === 'light' ? 'dark_mode' : 'light_mode'),
                 ]);
-            }
+            },
         };
     };
 
+    const defaultI18n = {
+        label: 'Choose files or drag them here',
+        selectedFiles: 'Selected Files:',
+        acceptedTypes: 'Accepted:',
+        removeFile: 'Remove file',
+        fileSizeExceeds: 'File size exceeds {maxSize}MB limit',
+        fileTypeNotAccepted: 'File type not accepted. Accepted: {accept}',
+        fileSizeUnits: {
+            bytes: 'B',
+            kb: 'KB',
+            mb: 'MB',
+            gb: 'GB',
+        },
+    };
     /**
      * File Upload Component with Drag and Drop
      * Supports multiple files, file type validation, size limits, and image preview
      */
     const FileUpload = () => {
         let state;
-        const validateFile = (file, attrs) => {
+        const validateFile = (file, attrs, labels) => {
             // Check file size
             if (attrs.maxSize && file.size > attrs.maxSize) {
                 const maxSizeMB = (attrs.maxSize / (1024 * 1024)).toFixed(1);
-                return `File size exceeds ${maxSizeMB}MB limit`;
+                return labels.fileSizeExceeds.replace('{maxSize}', maxSizeMB);
             }
             // Check file type
             if (attrs.accept) {
@@ -6855,7 +6872,7 @@
                     }
                 });
                 if (!isAccepted) {
-                    return `File type not accepted. Accepted: ${attrs.accept}`;
+                    return labels.fileTypeNotAccepted.replace('{accept}', attrs.accept);
                 }
             }
             return null;
@@ -6871,12 +6888,12 @@
                 reader.readAsDataURL(file);
             }
         };
-        const handleFiles = (fileList, attrs) => {
+        const handleFiles = (fileList, attrs, labels) => {
             const newFiles = Array.from(fileList);
             const validFiles = [];
             // Validate each file
             for (const file of newFiles) {
-                const error = validateFile(file, attrs);
+                const error = validateFile(file, attrs, labels);
                 if (error) {
                     file.uploadError = error;
                 }
@@ -6913,11 +6930,11 @@
                 attrs.onFileRemoved(fileToRemove);
             }
         };
-        const formatFileSize = (bytes) => {
+        const formatFileSize = (bytes, labels) => {
             if (bytes === 0)
-                return '0 B';
+                return `0 ${labels.fileSizeUnits.bytes}`;
             const k = 1024;
-            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const sizes = [labels.fileSizeUnits.bytes, labels.fileSizeUnits.kb, labels.fileSizeUnits.mb, labels.fileSizeUnits.gb];
             const i = Math.floor(Math.log(bytes) / Math.log(k));
             return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
         };
@@ -6931,7 +6948,9 @@
                 };
             },
             view: ({ attrs }) => {
-                const { accept, multiple = false, disabled = false, label = 'Choose files or drag them here', helperText, showPreview = true, className = '', error, } = attrs;
+                const { accept, multiple = false, disabled = false, label, helperText, showPreview = true, className = '', error, i18n, } = attrs;
+                const labels = Object.assign(Object.assign({}, defaultI18n), i18n);
+                const displayLabel = label || labels.label;
                 return m('.file-upload-container', { class: className }, [
                     // Upload area
                     m('.file-upload-area', {
@@ -6965,7 +6984,7 @@
                             e.stopPropagation();
                             state.isDragOver = false;
                             if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
-                                handleFiles(e.dataTransfer.files, attrs);
+                                handleFiles(e.dataTransfer.files, attrs, labels);
                             }
                         },
                         onclick: () => {
@@ -6984,15 +7003,15 @@
                             onchange: (e) => {
                                 const target = e.target;
                                 if (target.files) {
-                                    handleFiles(target.files, attrs);
+                                    handleFiles(target.files, attrs, labels);
                                 }
                             },
                         }),
                         m('.file-upload-content', [
                             m('i.material-icons.file-upload-icon', 'cloud_upload'),
-                            m('p.file-upload-label', label),
+                            m('p.file-upload-label', displayLabel),
                             helperText && m('p.file-upload-helper', helperText),
-                            accept && m('p.file-upload-types', `Accepted: ${accept}`),
+                            accept && m('p.file-upload-types', `${labels.acceptedTypes} ${accept}`),
                         ]),
                     ]),
                     // Error message
@@ -7000,7 +7019,7 @@
                     // File list
                     state.files.length > 0 &&
                         m('.file-upload-list', [
-                            m('h6', 'Selected Files:'),
+                            m('h6', labels.selectedFiles),
                             state.files.map((file) => m('.file-upload-item', { key: file.name + file.size }, [
                                 // Preview thumbnail
                                 showPreview && file.preview && m('.file-preview', [m('img', { src: file.preview, alt: file.name })]),
@@ -7008,7 +7027,7 @@
                                 m('.file-info', [
                                     m('.file-name', file.name),
                                     m('.file-details', [
-                                        m('span.file-size', formatFileSize(file.size)),
+                                        m('span.file-size', formatFileSize(file.size, labels)),
                                         file.type && m('span.file-type', file.type),
                                     ]),
                                     // Progress bar (if uploading)
@@ -7029,7 +7048,7 @@
                                         e.stopPropagation();
                                         removeFile(file, attrs);
                                     },
-                                    title: 'Remove file',
+                                    title: labels.removeFile,
                                 }, [m('i.material-icons', 'close')]),
                             ])),
                         ]),
@@ -7870,18 +7889,18 @@
                         const handleItemClick = (e) => {
                             if (item.disabled)
                                 return;
-                            if (item.onClick) {
+                            if (item.onclick) {
                                 e.preventDefault();
-                                item.onClick(item, e);
+                                item.onclick(item, e);
                             }
                         };
                         const isVertical = orientation === 'vertical';
                         return m('div', {
                             key: item.id || index,
                             className: itemClasses,
-                            onclick: item.onClick ? handleItemClick : undefined,
-                            role: item.onClick ? 'button' : undefined,
-                            tabindex: item.onClick && !item.disabled ? 0 : undefined,
+                            onclick: item.onclick ? handleItemClick : undefined,
+                            role: item.onclick ? 'button' : undefined,
+                            tabindex: item.onclick && !item.disabled ? 0 : undefined,
                             'aria-disabled': item.disabled ? 'true' : undefined,
                         }, [
                             // Timestamp (on opposite side of content from bullet)

package/dist/theme-switcher.d.ts

@@ -1,5 +1,25 @@
 import { FactoryComponent } from 'mithril';
 export type Theme = 'light' | 'dark' | 'auto';
+export interface ThemeSwitcherI18n {
+    /** Label for the theme switcher */
+    theme?: string;
+    /** Light theme label */
+    light?: string;
+    /** Dark theme label */
+    dark?: string;
+    /** Auto theme label */
+    auto?: string;
+    /** Light theme title/tooltip */
+    lightTitle?: string;
+    /** Dark theme title/tooltip */
+    darkTitle?: string;
+    /** Auto theme title/tooltip */
+    autoTitle?: string;
+    /** Toggle button title when switching to dark */
+    switchToDark?: string;
+    /** Toggle button title when switching to light */
+    switchToLight?: string;
+}
 export interface ThemeSwitcherAttrs {
     /** Current theme selection */
     theme?: Theme;
@@ -9,6 +29,8 @@ export interface ThemeSwitcherAttrs {
     showLabels?: boolean;
     /** Custom class for the container */
     className?: string;
+    /** Internationalization */
+    i18n?: ThemeSwitcherI18n;
 }
 /**
  * Theme switching utilities and component
@@ -46,4 +68,5 @@ export declare const ThemeSwitcher: FactoryComponent<ThemeSwitcherAttrs>;
  */
 export declare const ThemeToggle: FactoryComponent<{
     className?: string;
+    i18n?: ThemeSwitcherI18n;
 }>;

package/dist/timeline.d.ts

@@ -3,7 +3,7 @@ export interface TimelineItemAttrs {
     /** Unique identifier for the timeline item */
     id?: string;
     /** Main label/title for the timeline item */
-    label: string;
+    label?: string;
     /** Optional description text */
     description?: string;
     /** Timestamp for the item (string or Date object) */
@@ -15,7 +15,7 @@ export interface TimelineItemAttrs {
     /** Color theme for the timeline item */
     color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
     /** Click handler for the timeline item */
-    onClick?: (item: TimelineItemAttrs, event: Event) => void;
+    onclick?: (item: TimelineItemAttrs, event: Event) => void;
     /** Whether the item is disabled */
     disabled?: boolean;
     /** Custom CSS class for the item */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",