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

package/dist/index.esm.js

@@ -1158,23 +1158,8 @@ const CollapsibleItem = () => {
                 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,
@@ -4394,13 +4379,9 @@ const Switch = () => {
 /** 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 = {
@@ -4411,7 +4392,9 @@ const Tabs = () => {
         indicatorStyle: {
             left: '0px',
             width: '0px',
-        }};
+        },
+        lastIndicatorUpdate: '',
+    };
     const createId = (title, id) => (id ? id : title.replace(/ /g, '').toLowerCase());
     const updateIndicator = () => {
         const tabElement = document.getElementById(state.activeTabId);
@@ -4433,6 +4416,7 @@ const Tabs = () => {
         }
     };
     const handleTabClick = (tabId, tabElement, attrs) => {
+        console.log({ state, tabId });
         if (state.activeTabId === tabId)
             return;
         state.activeTabId = tabId;
@@ -4492,20 +4476,15 @@ const Tabs = () => {
         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;
@@ -4544,7 +4523,7 @@ const Tabs = () => {
                             disabled,
                         }, m('a', {
                             id: anchorId,
-                            className: tab.active ? 'active' : undefined,
+                            className: tab.tabId === state.activeTabId ? 'active' : undefined,
                             target,
                             href: href || `#${anchorId}`,
                             onclick: disabled || href
@@ -5339,4 +5318,866 @@ const initTooltips = (selector = '[data-tooltip]', options = {}) => {
     return tooltips;
 };
 
-export { AnchorItem, Autocomplete, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DatePicker, Dropdown, EmailInput, FileInput, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, ModalPanel, NumberInput, Options, Pagination, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, SmallButton, SubmitButton, Switch, Tabs, TextArea, TextInput, TimePicker, Toast, ToastComponent, Tooltip, TooltipComponent, UrlInput, getDropdownStyles, initPushpins, initTooltips, isNumeric, padLeft, range, toast, uniqueId, uuid4 };
+/**
+ * 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' }));
+        }
+    };
+};
+
+export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DatePicker, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, ModalPanel, NumberInput, Options, Pagination, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Toast, ToastComponent, Tooltip, TooltipComponent, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, padLeft, range, toast, uniqueId, uuid4 };