mithril-materialized 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/index.umd.js

@@ -1162,23 +1162,8 @@
                     header || iconName
                         ? m('.collapsible-header', {
                             onclick: onToggle,
-                            style: {
-                                cursor: 'pointer',
-                                padding: '1rem',
-                                backgroundColor: '#fff',
-                                borderBottom: '1px solid #ddd',
-                                display: 'flex',
-                                alignItems: 'center',
-                                transition: 'background-color 0.2s ease',
-                            },
-                            onmouseover: (e) => {
-                                e.target.style.backgroundColor = '#f5f5f5';
-                            },
-                            onmouseleave: (e) => {
-                                e.target.style.backgroundColor = '#fff';
-                            },
                         }, [
-                            iconName ? m('i.material-icons', { style: { marginRight: '1rem' } }, iconName) : undefined,
+                            iconName ? m('i.material-icons', iconName) : undefined,
                             header ? (typeof header === 'string' ? m('span', header) : header) : undefined,
                         ])
                         : undefined,
@@ -4398,13 +4383,9 @@
     /** CSS-only Tabs component - no MaterializeCSS dependencies */
     const Tabs = () => {
         const toAnchored = () => {
-            let activeTabFound = false;
             return (tab) => {
-                const active = activeTabFound ? false : tab.active;
-                if (active)
-                    activeTabFound = true;
                 const tabId = createId(tab.title, tab.id);
-                return Object.assign(Object.assign({}, tab), { active, tabId, anchorId: `anchor-${tabId}` });
+                return Object.assign(Object.assign({}, tab), { tabId, anchorId: `anchor-${tabId}` });
             };
         };
         const state = {
@@ -4415,7 +4396,9 @@
             indicatorStyle: {
                 left: '0px',
                 width: '0px',
-            }};
+            },
+            lastIndicatorUpdate: '',
+        };
         const createId = (title, id) => (id ? id : title.replace(/ /g, '').toLowerCase());
         const updateIndicator = () => {
             const tabElement = document.getElementById(state.activeTabId);
@@ -4437,6 +4420,7 @@
             }
         };
         const handleTabClick = (tabId, tabElement, attrs) => {
+            console.log({ state, tabId });
             if (state.activeTabId === tabId)
                 return;
             state.activeTabId = tabId;
@@ -4496,20 +4480,15 @@
             const selectedTab = selectedTabId ? anchoredTabs.find((a) => a.tabId === selectedTabId) : undefined;
             if (selectedTab) {
                 state.activeTabId = selectedTab.tabId;
-                selectedTab.active = true;
                 return selectedTab;
             }
-            const activeTab = anchoredTabs.find((t) => t.active);
-            if (activeTab) {
-                // Active tab property takes precedence over selectedTabId
-                state.activeTabId = activeTab.tabId;
-                return activeTab;
-            }
+            const curTab = state.activeTabId && anchoredTabs.find((a) => a.tabId === state.activeTabId);
+            if (curTab)
+                return curTab;
             // Default to first non-disabled tab
-            const firstAvailableTab = anchoredTabs.find((t) => !t.disabled && !t.href);
+            const firstAvailableTab = anchoredTabs.find((a) => !a.disabled && !a.href);
             if (firstAvailableTab) {
                 state.activeTabId = firstAvailableTab.tabId;
-                firstAvailableTab.active = true;
                 return firstAvailableTab;
             }
             return undefined;
@@ -4548,7 +4527,7 @@
                                 disabled,
                             }, m('a', {
                                 id: anchorId,
-                                className: tab.active ? 'active' : undefined,
+                                className: tab.tabId === state.activeTabId ? 'active' : undefined,
                                 target,
                                 href: href || `#${anchorId}`,
                                 onclick: disabled || href
@@ -5343,8 +5322,872 @@
         return tooltips;
     };
 
+    /**
+     * Theme switching utilities and component
+     */
+    class ThemeManager {
+        /**
+         * Set the theme for the entire application
+         */
+        static setTheme(theme) {
+            this.currentTheme = theme;
+            const root = document.documentElement;
+            if (theme === 'auto') {
+                // Remove explicit theme, let CSS media query handle it
+                root.removeAttribute('data-theme');
+            }
+            else {
+                // Set explicit theme
+                root.setAttribute('data-theme', theme);
+            }
+            // Store preference in localStorage
+            try {
+                localStorage.setItem('mm-theme', theme);
+            }
+            catch (e) {
+                // localStorage might not be available
+            }
+        }
+        /**
+         * Get the current theme
+         */
+        static getTheme() {
+            return this.currentTheme;
+        }
+        /**
+         * Get the effective theme (resolves 'auto' to actual theme)
+         */
+        static getEffectiveTheme() {
+            if (this.currentTheme !== 'auto') {
+                return this.currentTheme;
+            }
+            // Check CSS media query for auto mode
+            if (typeof window !== 'undefined' && window.matchMedia) {
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+            return 'light';
+        }
+        /**
+         * Initialize theme from localStorage or system preference
+         */
+        static initialize() {
+            let savedTheme = 'auto';
+            try {
+                const stored = localStorage.getItem('mm-theme');
+                if (stored && ['light', 'dark', 'auto'].includes(stored)) {
+                    savedTheme = stored;
+                }
+            }
+            catch (e) {
+                // localStorage might not be available
+            }
+            this.setTheme(savedTheme);
+        }
+        /**
+         * Toggle between light and dark themes
+         */
+        static toggle() {
+            const current = this.getEffectiveTheme();
+            this.setTheme(current === 'light' ? 'dark' : 'light');
+        }
+    }
+    ThemeManager.currentTheme = 'auto';
+    /**
+     * Theme Switcher Component
+     * Provides UI controls for changing themes
+     */
+    const ThemeSwitcher = () => {
+        return {
+            oninit: () => {
+                // Initialize theme manager if not already done
+                if (typeof window !== 'undefined') {
+                    ThemeManager.initialize();
+                }
+            },
+            view: ({ attrs }) => {
+                const { theme = ThemeManager.getTheme(), onThemeChange, showLabels = true, className = '' } = attrs;
+                const handleThemeChange = (newTheme) => {
+                    ThemeManager.setTheme(newTheme);
+                    if (onThemeChange) {
+                        onThemeChange(newTheme);
+                    }
+                };
+                return m('.theme-switcher', { class: className }, [
+                    showLabels && m('span.theme-switcher-label', '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')
+                        ]),
+                        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')
+                        ]),
+                        m('button.btn-flat', {
+                            class: theme === 'dark' ? 'active' : '',
+                            onclick: () => handleThemeChange('dark'),
+                            title: 'Dark theme'
+                        }, [
+                            m('i.material-icons', 'dark_mode'),
+                            showLabels && m('span', 'Dark')
+                        ])
+                    ])
+                ]);
+            }
+        };
+    };
+    /**
+     * Simple theme toggle button (just switches between light/dark)
+     */
+    const ThemeToggle = () => {
+        return {
+            oninit: () => {
+                // Initialize theme manager if not already done
+                if (typeof window !== 'undefined') {
+                    ThemeManager.initialize();
+                }
+            },
+            view: ({ attrs }) => {
+                const currentTheme = ThemeManager.getEffectiveTheme();
+                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;'
+                }, [
+                    m('i.material-icons', {
+                        style: 'color: inherit; font-size: 24px;'
+                    }, currentTheme === 'light' ? 'dark_mode' : 'light_mode')
+                ]);
+            }
+        };
+    };
+
+    /**
+     * 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) => {
+            // 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`;
+            }
+            // Check file type
+            if (attrs.accept) {
+                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());
+                    }
+                    else {
+                        // MIME type check
+                        return file.type.match(acceptedType.replace('*', '.*'));
+                    }
+                });
+                if (!isAccepted) {
+                    return `File type not accepted. Accepted: ${attrs.accept}`;
+                }
+            }
+            return null;
+        };
+        const createFilePreview = (file) => {
+            if (file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    var _a;
+                    file.preview = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+                    m.redraw();
+                };
+                reader.readAsDataURL(file);
+            }
+        };
+        const handleFiles = (fileList, attrs) => {
+            const newFiles = Array.from(fileList);
+            const validFiles = [];
+            // Validate each file
+            for (const file of newFiles) {
+                const error = validateFile(file, attrs);
+                if (error) {
+                    file.uploadError = error;
+                }
+                else {
+                    validFiles.push(file);
+                    if (attrs.showPreview) {
+                        createFilePreview(file);
+                    }
+                }
+            }
+            // Check max files limit
+            if (attrs.maxFiles) {
+                const totalFiles = state.files.length + validFiles.length;
+                if (totalFiles > attrs.maxFiles) {
+                    const allowedCount = attrs.maxFiles - state.files.length;
+                    validFiles.splice(allowedCount);
+                }
+            }
+            // Add valid files to state
+            if (attrs.multiple) {
+                state.files = [...state.files, ...validFiles];
+            }
+            else {
+                state.files = validFiles.slice(0, 1);
+            }
+            // Notify parent component
+            if (attrs.onFilesSelected) {
+                attrs.onFilesSelected(state.files.filter(f => !f.uploadError));
+            }
+        };
+        const removeFile = (fileToRemove, attrs) => {
+            state.files = state.files.filter(file => file !== fileToRemove);
+            if (attrs.onFileRemoved) {
+                attrs.onFileRemoved(fileToRemove);
+            }
+        };
+        const formatFileSize = (bytes) => {
+            if (bytes === 0)
+                return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+        };
+        return {
+            oninit: () => {
+                state = {
+                    id: uniqueId(),
+                    files: [],
+                    isDragOver: false,
+                    isUploading: false
+                };
+            },
+            view: ({ 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', {
+                        class: [
+                            state.isDragOver ? 'drag-over' : '',
+                            disabled ? 'disabled' : '',
+                            error ? 'error' : '',
+                            state.files.length > 0 ? 'has-files' : ''
+                        ].filter(Boolean).join(' '),
+                        ondragover: (e) => {
+                            if (disabled)
+                                return;
+                            e.preventDefault();
+                            e.stopPropagation();
+                            state.isDragOver = true;
+                        },
+                        ondragleave: (e) => {
+                            if (disabled)
+                                return;
+                            e.preventDefault();
+                            e.stopPropagation();
+                            state.isDragOver = false;
+                        },
+                        ondrop: (e) => {
+                            var _a;
+                            if (disabled)
+                                return;
+                            e.preventDefault();
+                            e.stopPropagation();
+                            state.isDragOver = false;
+                            if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                                handleFiles(e.dataTransfer.files, attrs);
+                            }
+                        },
+                        onclick: () => {
+                            if (disabled)
+                                return;
+                            const input = document.getElementById(state.id);
+                            input === null || input === void 0 ? void 0 : input.click();
+                        }
+                    }, [
+                        m('input[type="file"]', {
+                            id: state.id,
+                            accept,
+                            multiple,
+                            disabled,
+                            style: { display: 'none' },
+                            onchange: (e) => {
+                                const target = e.target;
+                                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}`)
+                        ])
+                    ]),
+                    // 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}%` }
+                                        })
+                                    ])
+                                ]),
+                                // 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')
+                            ])
+                        ]))
+                    ])
+                ]);
+            }
+        };
+    };
+
+    /**
+     * Sidenav Component
+     * A responsive navigation drawer that slides in from the side
+     */
+    const Sidenav = () => {
+        let state;
+        const handleBackdropClick = (attrs) => {
+            if (attrs.closeOnBackdropClick !== false && attrs.onToggle) {
+                attrs.onToggle(false);
+            }
+        };
+        const handleEscapeKey = (e, attrs) => {
+            if (e.key === 'Escape' && attrs.closeOnEscape !== false && attrs.onToggle) {
+                attrs.onToggle(false);
+            }
+        };
+        const setBodyOverflow = (isOpen, mode) => {
+            if (typeof document !== 'undefined') {
+                document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
+            }
+        };
+        return {
+            oninit: ({ attrs }) => {
+                state = {
+                    id: attrs.id || uniqueId(),
+                    isOpen: attrs.isOpen || false,
+                    isAnimating: false
+                };
+                // Set up keyboard listener
+                if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
+                    document.addEventListener('keydown', (e) => handleEscapeKey(e, attrs));
+                }
+            },
+            onbeforeupdate: ({ attrs }) => {
+                const wasOpen = state.isOpen;
+                const isOpen = attrs.isOpen || false;
+                if (wasOpen !== isOpen) {
+                    state.isOpen = isOpen;
+                    state.isAnimating = true;
+                    setBodyOverflow(isOpen, attrs.mode || 'overlay');
+                    // Clear animation state after animation completes
+                    setTimeout(() => {
+                        state.isAnimating = false;
+                        m.redraw();
+                    }, attrs.animationDuration || 300);
+                }
+            },
+            onremove: ({ attrs }) => {
+                // Clean up
+                setBodyOverflow(false, attrs.mode || 'overlay');
+                if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
+                    document.removeEventListener('keydown', (e) => handleEscapeKey(e, attrs));
+                }
+            },
+            view: ({ attrs, children }) => {
+                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)
+                    }),
+                    // Sidenav (using existing materialize structure)
+                    m('ul.sidenav', {
+                        id: state.id,
+                        class: [
+                            position === 'right' ? 'right-aligned' : '',
+                            fixed ? 'sidenav-fixed' : '',
+                            className
+                        ].filter(Boolean).join(' '),
+                        style: {
+                            width: `${width}px`,
+                            transform: isOpen ? 'translateX(0)' :
+                                position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
+                            'transition-duration': `${animationDuration}ms`
+                        }
+                    }, children)
+                ];
+            }
+        };
+    };
+    /**
+     * Sidenav Item Component
+     * Individual items for the sidenav menu
+     */
+    const SidenavItem = () => {
+        return {
+            view: ({ attrs, children }) => {
+                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
+                ];
+                if (href && !disabled) {
+                    return m('li', { class: itemClasses }, [
+                        m('a', {
+                            href,
+                            onclick: disabled ? undefined : onclick
+                        }, content)
+                    ]);
+                }
+                return m('li', { class: itemClasses }, [
+                    m('a', {
+                        onclick: disabled ? undefined : onclick,
+                        href: '#!'
+                    }, content)
+                ]);
+            }
+        };
+    };
+    /**
+     * Sidenav utilities for programmatic control
+     */
+    class SidenavManager {
+        /**
+         * Open a sidenav by ID
+         */
+        static open(id) {
+            const element = document.getElementById(id);
+            if (element) {
+                element.classList.add('open');
+                element.classList.remove('closed');
+            }
+        }
+        /**
+         * Close a sidenav by ID
+         */
+        static close(id) {
+            const element = document.getElementById(id);
+            if (element) {
+                element.classList.remove('open');
+                element.classList.add('closed');
+            }
+        }
+        /**
+         * Toggle a sidenav by ID
+         */
+        static toggle(id) {
+            const element = document.getElementById(id);
+            if (element) {
+                const isOpen = element.classList.contains('open');
+                if (isOpen) {
+                    this.close(id);
+                }
+                else {
+                    this.open(id);
+                }
+            }
+        }
+    }
+
+    /**
+     * Breadcrumb Component
+     * Displays a navigation path showing the user's location within a site hierarchy
+     */
+    const Breadcrumb = () => {
+        return {
+            view: ({ attrs }) => {
+                const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false } = attrs;
+                if (items.length === 0) {
+                    return null;
+                }
+                let displayItems = [...items];
+                // Handle max items with ellipsis
+                if (maxItems && items.length > maxItems) {
+                    const firstItem = items[0];
+                    const lastItems = items.slice(-(maxItems - 2));
+                    displayItems = [
+                        firstItem,
+                        { text: '...', disabled: true, className: 'breadcrumb-ellipsis' },
+                        ...lastItems
+                    ];
+                }
+                return m('nav.breadcrumb', { class: className }, [
+                    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(' ')
+                            }, [
+                                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)
+                            ])
+                        ];
+                    }).reduce((acc, val) => acc.concat(val), []))
+                ]);
+            }
+        };
+    };
+    /**
+     * Simple Breadcrumb utility for common use cases
+     */
+    const createBreadcrumb = (path, basePath = '/') => {
+        const segments = path.split('/').filter(Boolean);
+        const items = [];
+        // Add home item
+        items.push({
+            text: 'Home',
+            href: basePath,
+            icon: 'home'
+        });
+        // Add path segments
+        let currentPath = basePath;
+        segments.forEach((segment, index) => {
+            currentPath += (currentPath.endsWith('/') ? '' : '/') + segment;
+            const isLast = index === segments.length - 1;
+            items.push({
+                text: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
+                href: isLast ? undefined : currentPath,
+                active: isLast
+            });
+        });
+        return items;
+    };
+    /**
+     * Breadcrumb utilities
+     */
+    class BreadcrumbManager {
+        /**
+         * Create breadcrumb items from a route path
+         */
+        static fromRoute(route, routeConfig = {}) {
+            const segments = route.split('/').filter(Boolean);
+            const items = [];
+            // Add home
+            items.push({
+                text: 'Home',
+                href: '/',
+                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, ' ');
+                items.push({
+                    text,
+                    href: isLast ? undefined : currentPath,
+                    active: isLast
+                });
+            });
+            return items;
+        }
+        /**
+         * Create breadcrumb items from a hierarchical object
+         */
+        static fromHierarchy(hierarchy, textKey = 'name', pathKey = 'path') {
+            return hierarchy.map((item, index) => ({
+                text: item[textKey],
+                href: index === hierarchy.length - 1 ? undefined : item[pathKey],
+                active: index === hierarchy.length - 1
+            }));
+        }
+    }
+
+    /**
+     * Wizard/Stepper Component
+     * A multi-step interface for guiding users through a process
+     */
+    const Wizard = () => {
+        let state;
+        const validateStep = async (stepIndex, steps) => {
+            const step = steps[stepIndex];
+            if (!step || !step.validate)
+                return true;
+            state.isValidating = true;
+            try {
+                const isValid = await step.validate();
+                if (isValid) {
+                    state.completedSteps.add(stepIndex);
+                    state.errorSteps.delete(stepIndex);
+                }
+                else {
+                    state.errorSteps.add(stepIndex);
+                    state.completedSteps.delete(stepIndex);
+                }
+                return isValid;
+            }
+            catch (error) {
+                state.errorSteps.add(stepIndex);
+                state.completedSteps.delete(stepIndex);
+                return false;
+            }
+            finally {
+                state.isValidating = false;
+                m.redraw();
+            }
+        };
+        const goToStep = async (stepIndex, attrs) => {
+            const { linear = true, onStepChange, steps } = attrs;
+            if (stepIndex < 0 || stepIndex >= steps.length)
+                return false;
+            // Check if step is disabled
+            if (steps[stepIndex].disabled)
+                return false;
+            // In linear mode, validate all previous steps
+            if (linear && stepIndex > state.currentStep) {
+                for (let i = state.currentStep; i < stepIndex; i++) {
+                    const isValid = await validateStep(i, steps);
+                    if (!isValid && !steps[i].optional) {
+                        return false;
+                    }
+                }
+            }
+            // Validate current step before moving forward
+            if (stepIndex > state.currentStep) {
+                const isValid = await validateStep(state.currentStep, steps);
+                if (!isValid && !steps[state.currentStep].optional) {
+                    return false;
+                }
+            }
+            const oldStep = state.currentStep;
+            state.currentStep = stepIndex;
+            // Always call onStepChange when step changes
+            if (onStepChange && oldStep !== stepIndex) {
+                onStepChange(stepIndex, steps[stepIndex].id || `step-${stepIndex}`);
+            }
+            // Force redraw to update UI
+            m.redraw();
+            return true;
+        };
+        const nextStep = async (attrs) => {
+            const { steps } = attrs;
+            // Check if we're on the last step
+            if (state.currentStep === steps.length - 1) {
+                // This is the complete action
+                if (attrs.onComplete) {
+                    attrs.onComplete();
+                }
+                return;
+            }
+            // Try to move to next step
+            await goToStep(state.currentStep + 1, attrs);
+        };
+        const previousStep = (attrs) => {
+            goToStep(state.currentStep - 1, attrs);
+        };
+        const skipStep = (attrs) => {
+            const { steps } = attrs;
+            const currentStepData = steps[state.currentStep];
+            if (currentStepData && currentStepData.optional) {
+                goToStep(state.currentStep + 1, attrs);
+            }
+        };
+        return {
+            oninit: ({ attrs }) => {
+                state = {
+                    id: uniqueId(),
+                    currentStep: attrs.currentStep || 0,
+                    isValidating: false,
+                    completedSteps: new Set(),
+                    errorSteps: new Set()
+                };
+            },
+            onbeforeupdate: ({ attrs }) => {
+                // Sync external currentStep changes
+                if (typeof attrs.currentStep === 'number' && attrs.currentStep !== state.currentStep) {
+                    state.currentStep = Math.max(0, attrs.currentStep);
+                }
+            },
+            view: ({ attrs }) => {
+                const { steps, showStepNumbers = true, className = '', showNavigation = true, labels = {}, orientation = 'horizontal', allowHeaderNavigation = false } = attrs;
+                // Ensure currentStep is within bounds
+                if (state.currentStep >= steps.length) {
+                    state.currentStep = Math.max(0, steps.length - 1);
+                }
+                const currentStepData = steps[state.currentStep];
+                const isFirstStep = state.currentStep === 0;
+                const isLastStep = state.currentStep === steps.length - 1;
+                const activeContent = (currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.vnode) ? currentStepData.vnode() : null;
+                return m('.wizard', { class: `${orientation} ${className}` }, [
+                    // Step indicator
+                    m('.wizard-header', [
+                        m('.wizard-steps', steps.map((step, index) => {
+                            const isActive = index === state.currentStep;
+                            const isCompleted = state.completedSteps.has(index);
+                            const hasError = state.errorSteps.has(index);
+                            return m('.wizard-step', {
+                                class: [
+                                    isActive ? 'active' : '',
+                                    isCompleted ? 'completed' : '',
+                                    hasError ? 'error' : '',
+                                    step.disabled ? 'disabled' : '',
+                                    step.optional ? 'optional' : ''
+                                ].filter(Boolean).join(' '),
+                                onclick: allowHeaderNavigation && !step.disabled ?
+                                    () => goToStep(index, attrs) : undefined
+                            }, [
+                                // Step number/icon
+                                m('.wizard-step-indicator', [
+                                    isCompleted ?
+                                        m('i.material-icons', 'check') :
+                                        hasError ?
+                                            m('i.material-icons', 'error') :
+                                            step.icon ?
+                                                m('i.material-icons', step.icon) :
+                                                showStepNumbers ?
+                                                    m('span.wizard-step-number', index + 1) :
+                                                    null
+                                ]),
+                                // Step content
+                                m('.wizard-step-content', [
+                                    m('.wizard-step-title', step.title),
+                                    step.subtitle && m('.wizard-step-subtitle', step.subtitle),
+                                    step.optional && m('.wizard-step-optional', labels.optional || 'Optional')
+                                ]),
+                                // Connector line (except for last step in horizontal mode)
+                                orientation === 'horizontal' && index < steps.length - 1 &&
+                                    m('.wizard-step-connector')
+                            ]);
+                        }))
+                    ]),
+                    // Step content
+                    m('.wizard-body', [
+                        activeContent && m('.wizard-step-panel', {
+                            key: (currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.id) || `step-${state.currentStep}`
+                        }, activeContent)
+                    ]),
+                    // Navigation
+                    showNavigation && m('.wizard-footer', [
+                        m('.wizard-navigation', [
+                            // Previous button
+                            !isFirstStep && m('button.btn-flat.wizard-btn-previous', {
+                                onclick: () => previousStep(attrs),
+                                disabled: state.isValidating
+                            }, labels.previous || 'Previous'),
+                            // Skip button (for optional steps)
+                            currentStepData && currentStepData.optional && !isLastStep &&
+                                m('button.btn-flat.wizard-btn-skip', {
+                                    onclick: () => skipStep(attrs),
+                                    disabled: state.isValidating
+                                }, labels.skip || 'Skip'),
+                            // Next/Complete button
+                            m('button.btn.wizard-btn-next', {
+                                onclick: () => nextStep(attrs),
+                                disabled: state.isValidating,
+                                class: isLastStep ? 'wizard-btn-complete' : ''
+                            }, [
+                                state.isValidating && m('i.material-icons.left', 'hourglass_empty'),
+                                isLastStep ? (labels.complete || 'Complete') : (labels.next || 'Next')
+                            ])
+                        ])
+                    ])
+                ]);
+            }
+        };
+    };
+    /**
+     * Simple linear stepper for forms
+     */
+    const Stepper = () => {
+        return {
+            view: ({ attrs }) => {
+                return m(Wizard, Object.assign(Object.assign({}, attrs), { linear: true, showNavigation: false, allowHeaderNavigation: false, orientation: 'horizontal' }));
+            }
+        };
+    };
+
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
+    exports.Breadcrumb = Breadcrumb;
+    exports.BreadcrumbManager = BreadcrumbManager;
     exports.Button = Button;
     exports.ButtonFactory = ButtonFactory;
     exports.Carousel = Carousel;
@@ -5359,6 +6202,7 @@
     exports.Dropdown = Dropdown;
     exports.EmailInput = EmailInput;
     exports.FileInput = FileInput;
+    exports.FileUpload = FileUpload;
     exports.FlatButton = FlatButton;
     exports.FloatingActionButton = FloatingActionButton;
     exports.HelperText = HelperText;
@@ -5384,18 +6228,27 @@
     exports.SearchSelect = SearchSelect;
     exports.SecondaryContent = SecondaryContent;
     exports.Select = Select;
+    exports.Sidenav = Sidenav;
+    exports.SidenavItem = SidenavItem;
+    exports.SidenavManager = SidenavManager;
     exports.SmallButton = SmallButton;
+    exports.Stepper = Stepper;
     exports.SubmitButton = SubmitButton;
     exports.Switch = Switch;
     exports.Tabs = Tabs;
     exports.TextArea = TextArea;
     exports.TextInput = TextInput;
+    exports.ThemeManager = ThemeManager;
+    exports.ThemeSwitcher = ThemeSwitcher;
+    exports.ThemeToggle = ThemeToggle;
     exports.TimePicker = TimePicker;
     exports.Toast = Toast;
     exports.ToastComponent = ToastComponent;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
     exports.UrlInput = UrlInput;
+    exports.Wizard = Wizard;
+    exports.createBreadcrumb = createBreadcrumb;
     exports.getDropdownStyles = getDropdownStyles;
     exports.initPushpins = initPushpins;
     exports.initTooltips = initTooltips;