mithril-materialized 2.0.0-beta.11 → 2.0.0-beta.14

package/dist/index.esm.js

@@ -836,6 +836,18 @@ const iconPaths = {
         'M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z',
         'M0 0h24v24H0z',
     ],
+    chevron: [
+        'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
+        'M0 0h24v24H0z', // background
+    ],
+    expand: [
+        'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
+        'M0 0h24v24H0z', // background
+    ],
+    collapse: [
+        'M19 13H5v-2h14v2z', // minus
+        'M0 0h24v24H0z', // background
+    ],
 };
 const MaterialIcon = () => {
     return {
@@ -845,8 +857,8 @@ const MaterialIcon = () => {
             const rotationMap = {
                 down: 0,
                 up: 180,
-                left: -90,
-                right: 90,
+                left: 90,
+                right: -90,
             };
             const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
             const transform = rotation ? `rotate(${rotation}deg)` : undefined;
@@ -1155,7 +1167,7 @@ const CodeBlock = () => ({
         const lang = language || 'lang-TypeScript';
         const label = lang.replace('lang-', '');
         const cb = code instanceof Array ? code.join('\n') : code;
-        const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim();
+        const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
         return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
             m('div', m('label', label)),
             m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
@@ -2178,6 +2190,12 @@ const InputField = (type, defaultClass = '') => () => {
         isValid: true,
         active: false,
         inputElement: null,
+        // Range-specific state
+        rangeMinValue: undefined,
+        rangeMaxValue: undefined,
+        singleValue: undefined,
+        isDragging: false,
+        activeThumb: null,
     };
     // let labelManager: { updateLabelState: () => void; cleanup: () => void } | null = null;
     // let lengthUpdateHandler: (() => void) | null = null;
@@ -2203,19 +2221,425 @@ const InputField = (type, defaultClass = '') => () => {
             state.hasInteracted = length > 0;
         }
     };
+    // Range slider helper functions
+    const getPercentage = (value, min, max) => {
+        return ((value - min) / (max - min)) * 100;
+    };
+    const updateRangeValues = (minValue, maxValue, attrs, immediate = false) => {
+        // Ensure min doesn't exceed max and vice versa
+        if (minValue > maxValue)
+            minValue = maxValue;
+        if (maxValue < minValue)
+            maxValue = minValue;
+        state.rangeMinValue = minValue;
+        state.rangeMaxValue = maxValue;
+        // Call oninput for immediate feedback or onchange for final changes
+        if (immediate && attrs.oninput) {
+            attrs.oninput(minValue, maxValue);
+        }
+        else if (!immediate && attrs.onchange) {
+            attrs.onchange(minValue, maxValue);
+        }
+    };
+    // Render function for single range slider with tooltip
+    const renderSingleRangeWithTooltip = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+        const { min = 0, max = 100, step = 1, initialValue, vertical = false, showValue = false, height = '200px', disabled = false, oninput, onchange, } = attrs;
+        // Initialize single range value
+        const currentValue = initialValue !== undefined ? initialValue : state.singleValue || min;
+        if (state.singleValue === undefined) {
+            state.singleValue = currentValue;
+        }
+        const percentage = getPercentage(state.singleValue, min, max);
+        // Only keep dynamic styles as inline, use CSS classes for static styles
+        const containerStyle = vertical ? { height } : {};
+        const progressStyle = vertical
+            ? {
+                height: `${percentage}%`,
+            }
+            : {
+                width: `${percentage}%`,
+            };
+        const thumbStyle = vertical
+            ? {
+                bottom: `${percentage}%`,
+            }
+            : {
+                left: `${percentage}%`,
+                marginLeft: '-10px', // Half of thumb size (20px)
+            };
+        const updateSingleValue = (newValue, immediate = false) => {
+            state.singleValue = newValue;
+            if (immediate && oninput) {
+                oninput(newValue);
+            }
+            else if (!immediate && onchange) {
+                onchange(newValue);
+            }
+        };
+        const handleMouseDown = (e) => {
+            if (disabled)
+                return;
+            e.preventDefault();
+            state.isDragging = true;
+            // Get container reference from the current target's parent
+            const thumbElement = e.currentTarget;
+            const container = thumbElement.parentElement;
+            if (!container)
+                return;
+            const handleMouseMove = (e) => {
+                if (!state.isDragging || !container)
+                    return;
+                const rect = container.getBoundingClientRect();
+                let percentage;
+                if (vertical) {
+                    percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+                }
+                else {
+                    percentage = ((e.clientX - rect.left) / rect.width) * 100;
+                }
+                percentage = Math.max(0, Math.min(100, percentage));
+                const value = min + (percentage / 100) * (max - min);
+                const steppedValue = Math.round(value / step) * step;
+                updateSingleValue(steppedValue, true);
+                // Redraw to update the UI
+                m.redraw();
+            };
+            const handleMouseUp = () => {
+                state.isDragging = false;
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                // Fire onchange when dragging ends
+                updateSingleValue(state.singleValue, false);
+            };
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        };
+        const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+        const orientation = vertical ? 'vertical' : 'horizontal';
+        return m('.input-field', { className: cn, style }, [
+            iconName ? m('i.material-icons.prefix', iconName) : undefined,
+            // Hidden input for label association and accessibility
+            m('input[type=range]', {
+                id,
+                value: state.singleValue,
+                min,
+                max,
+                step,
+                style: { display: 'none' },
+                disabled,
+                tabindex: -1,
+            }),
+            m('div', { class: fieldClass, style: containerStyle }, [
+                m(`.single-range-slider.${orientation}`, {
+                    tabindex: disabled ? -1 : 0,
+                    role: 'slider',
+                    'aria-valuemin': min,
+                    'aria-valuemax': max,
+                    'aria-valuenow': state.singleValue,
+                    'aria-label': label || 'Range slider',
+                    onclick: (e) => {
+                        // Focus the slider when clicked
+                        e.currentTarget.focus();
+                    },
+                    onkeydown: (e) => {
+                        if (disabled)
+                            return;
+                        let newValue = state.singleValue;
+                        switch (e.key) {
+                            case 'ArrowLeft':
+                            case 'ArrowDown':
+                                e.preventDefault();
+                                newValue = Math.max(min, newValue - step);
+                                updateSingleValue(newValue, false);
+                                m.redraw();
+                                break;
+                            case 'ArrowRight':
+                            case 'ArrowUp':
+                                e.preventDefault();
+                                newValue = Math.min(max, newValue + step);
+                                updateSingleValue(newValue, false);
+                                m.redraw();
+                                break;
+                            case 'Home':
+                                e.preventDefault();
+                                updateSingleValue(min, false);
+                                m.redraw();
+                                break;
+                            case 'End':
+                                e.preventDefault();
+                                updateSingleValue(max, false);
+                                m.redraw();
+                                break;
+                        }
+                    },
+                }, [
+                    // Track
+                    m(`.track.${orientation}`),
+                    // Progress
+                    m(`.range-progress.${orientation}`, { style: progressStyle }),
+                    // Thumb
+                    m(`.thumb.${orientation}`, {
+                        style: thumbStyle,
+                        onmousedown: handleMouseDown,
+                    }, showValue
+                        ? m(`.value-tooltip.${vertical ? 'right' : 'top'}`, state.singleValue.toFixed(0))
+                        : null),
+                ]),
+            ]),
+            label
+                ? m(Label, {
+                    label,
+                    id,
+                    isMandatory,
+                    isActive: true, // Range sliders always have active labels
+                })
+                : null,
+            helperText ? m(HelperText, { helperText }) : null,
+        ]);
+    };
+    // Render function for minmax range slider
+    const renderMinMaxRange = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+        const { min = 0, max = 100, step = 1, minValue, maxValue, vertical = false, showValue = false, height = '200px', disabled = false, } = attrs;
+        // Initialize range values
+        const currentMinValue = minValue !== undefined ? minValue : attrs.minValue || min;
+        const currentMaxValue = maxValue !== undefined ? maxValue : attrs.maxValue || max;
+        if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
+            state.rangeMinValue = currentMinValue;
+            state.rangeMaxValue = currentMaxValue;
+        }
+        // Initialize active thumb if not set
+        if (state.activeThumb === null) {
+            state.activeThumb = 'min';
+        }
+        const minPercentage = getPercentage(state.rangeMinValue, min, max);
+        const maxPercentage = getPercentage(state.rangeMaxValue, min, max);
+        // Only keep dynamic styles as inline, use CSS classes for static styles
+        const containerStyle = vertical ? { height } : {};
+        const rangeStyle = vertical
+            ? {
+                bottom: `${minPercentage}%`,
+                height: `${maxPercentage - minPercentage}%`,
+            }
+            : {
+                left: `${minPercentage}%`,
+                width: `${maxPercentage - minPercentage}%`,
+            };
+        // Only keep dynamic positioning and z-index as inline styles
+        const createThumbStyle = (percentage, isActive) => vertical
+            ? {
+                bottom: `${percentage}%`,
+                zIndex: isActive ? 10 : 5,
+            }
+            : {
+                left: `${percentage}%`,
+                marginLeft: '-10px', // Half of thumb size (20px)
+                zIndex: isActive ? 10 : 5,
+            };
+        const handleMouseDown = (thumb) => (e) => {
+            if (disabled)
+                return;
+            e.preventDefault();
+            state.isDragging = true;
+            state.activeThumb = thumb;
+            // Get container reference from the current target's parent
+            const thumbElement = e.currentTarget;
+            const container = thumbElement.parentElement;
+            if (!container)
+                return;
+            const handleMouseMove = (e) => {
+                if (!state.isDragging || !container)
+                    return;
+                const rect = container.getBoundingClientRect();
+                let percentage;
+                if (vertical) {
+                    percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+                }
+                else {
+                    percentage = ((e.clientX - rect.left) / rect.width) * 100;
+                }
+                percentage = Math.max(0, Math.min(100, percentage));
+                const value = min + (percentage / 100) * (max - min);
+                const steppedValue = Math.round(value / step) * step;
+                if (thumb === 'min') {
+                    updateRangeValues(Math.min(steppedValue, state.rangeMaxValue), state.rangeMaxValue, attrs, true);
+                }
+                else {
+                    updateRangeValues(state.rangeMinValue, Math.max(steppedValue, state.rangeMinValue), attrs, true);
+                }
+                // Redraw to update the UI
+                m.redraw();
+            };
+            const handleMouseUp = () => {
+                state.isDragging = false;
+                state.activeThumb = null;
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                // Fire onchange when dragging ends
+                updateRangeValues(state.rangeMinValue, state.rangeMaxValue, attrs, false);
+            };
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        };
+        const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+        const orientation = vertical ? 'vertical' : 'horizontal';
+        return m('.input-field', { className: cn, style }, [
+            iconName ? m('i.material-icons.prefix', iconName) : undefined,
+            // Hidden inputs for label association and accessibility
+            m('input[type=range]', {
+                id,
+                value: state.rangeMinValue,
+                min,
+                max,
+                step,
+                style: { display: 'none' },
+                disabled,
+                tabindex: -1,
+            }),
+            m('input[type=range]', {
+                id: `${id}_max`,
+                value: state.rangeMaxValue,
+                min,
+                max,
+                step,
+                style: { display: 'none' },
+                disabled,
+                tabindex: -1,
+            }),
+            m(`.${fieldClass}`, [
+                m(`.double-range-slider.${orientation}`, {
+                    style: containerStyle,
+                    tabindex: disabled ? -1 : 0,
+                    role: 'slider',
+                    'aria-valuemin': min,
+                    'aria-valuemax': max,
+                    'aria-valuenow': state.rangeMinValue,
+                    'aria-valuetext': `${state.rangeMinValue} to ${state.rangeMaxValue}`,
+                    'aria-label': label || 'Range slider',
+                    onclick: (e) => {
+                        // Focus the slider when clicked
+                        e.currentTarget.focus();
+                    },
+                    onkeydown: (e) => {
+                        if (disabled)
+                            return;
+                        let newMinValue = state.rangeMinValue;
+                        let newMaxValue = state.rangeMaxValue;
+                        const activeThumb = state.activeThumb || 'min';
+                        switch (e.key) {
+                            case 'ArrowLeft':
+                            case 'ArrowDown':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    newMinValue = Math.max(min, newMinValue - step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    newMaxValue = Math.max(newMinValue, newMaxValue - step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                            case 'ArrowRight':
+                            case 'ArrowUp':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    newMinValue = Math.min(newMaxValue, newMinValue + step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    newMaxValue = Math.min(max, newMaxValue + step);
+                                    updateRangeValues(newMinValue, newMaxValue, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                            // Remove Tab case - let normal tab navigation work
+                            // Users can click on specific thumbs to activate them
+                            case 'Home':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    updateRangeValues(min, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    updateRangeValues(newMinValue, newMinValue, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                            case 'End':
+                                e.preventDefault();
+                                if (activeThumb === 'min') {
+                                    updateRangeValues(newMaxValue, newMaxValue, attrs, false);
+                                }
+                                else {
+                                    updateRangeValues(newMinValue, max, attrs, false);
+                                }
+                                m.redraw();
+                                break;
+                        }
+                    },
+                }, [
+                    // Track
+                    m(`.track.${orientation}`),
+                    // Range
+                    m(`.range.${orientation}`, { style: rangeStyle }),
+                    // Min thumb
+                    m(`.thumb.${orientation}.min-thumb${state.activeThumb === 'min' ? '.active' : ''}`, {
+                        style: createThumbStyle(minPercentage, state.activeThumb === 'min'),
+                        onmousedown: handleMouseDown('min'),
+                        onclick: () => {
+                            state.activeThumb = 'min';
+                            m.redraw();
+                        },
+                    }, showValue ? m(`.value.${orientation}`, state.rangeMinValue.toFixed(0)) : null),
+                    // Max thumb
+                    m(`.thumb.${orientation}.max-thumb${state.activeThumb === 'max' ? '.active' : ''}`, {
+                        style: createThumbStyle(maxPercentage, state.activeThumb === 'max'),
+                        onmousedown: handleMouseDown('max'),
+                        onclick: () => {
+                            state.activeThumb = 'max';
+                            m.redraw();
+                        },
+                    }, showValue ? m(`.value.${orientation}`, state.rangeMaxValue.toFixed(0)) : null),
+                ]),
+            ]),
+            label
+                ? m(Label, {
+                    label,
+                    id,
+                    isMandatory,
+                    isActive: true, // Range sliders always have active labels
+                })
+                : null,
+            helperText ? m(HelperText, { helperText }) : null,
+        ]);
+    };
     return {
         view: ({ attrs }) => {
             var _a;
             const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
             // const attributes = toAttrs(params);
-            const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
+            const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
             const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
                 ? true
                 : false;
+            // Special rendering for minmax range sliders
+            if (type === 'range' && attrs.minmax) {
+                return renderMinMaxRange(attrs, state, cn, style, iconName, id, label, isMandatory, helperText);
+            }
+            // Special rendering for single range sliders with tooltips
+            if (type === 'range' && attrs.showValue) {
+                return renderSingleRangeWithTooltip(attrs, state, cn, style, iconName, id, label, isMandatory, helperText);
+            }
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
                 m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
-                    placeholder, 
+                    placeholder, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
+                        ? {
+                            height: attrs.height || '200px',
+                            width: '6px',
+                            writingMode: 'vertical-lr',
+                            direction: 'rtl',
+                        }
+                        : undefined, 
                     // attributes,
                     oncreate: ({ dom }) => {
                         const input = (state.inputElement = dom);
@@ -2231,7 +2655,7 @@ const InputField = (type, defaultClass = '') => () => {
                             state.currentLength = input.value.length; // Initial count
                         }
                         // Range input functionality
-                        if (type === 'range') {
+                        if (type === 'range' && !attrs.minmax) {
                             const updateThumb = () => {
                                 const value = input.value;
                                 const min = input.min || '0';
@@ -2484,7 +2908,7 @@ const Options = () => {
                     callback(checkedIds);
                 }
                 : undefined;
-            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
             const optionsContent = layout === 'horizontal'
                 ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
                     disabled: disabled || option.disabled,
@@ -3355,6 +3779,423 @@ const FloatingActionButton = () => {
     };
 };
 
+// Utility functions
+const getPercentage = (value, min, max) => {
+    return ((value - min) / (max - min)) * 100;
+};
+const updateRangeValues = (minValue, maxValue, attrs, state, immediate) => {
+    // Ensure min doesn't exceed max and vice versa
+    if (minValue > maxValue)
+        minValue = maxValue;
+    if (maxValue < minValue)
+        maxValue = minValue;
+    state.rangeMinValue = minValue;
+    state.rangeMaxValue = maxValue;
+    // Call oninput for immediate feedback or onchange for final changes
+    if (immediate && attrs.oninput) {
+        attrs.oninput(minValue, maxValue);
+    }
+    else if (!immediate && attrs.onchange) {
+        attrs.onchange(minValue, maxValue);
+    }
+};
+// Single Range Slider with Tooltip
+const renderSingleRangeWithTooltip = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+    const { min = 0, max = 100, step = 1, initialValue, vertical = false, showValue = false, height = '200px', disabled = false, tooltipPos = 'top', oninput, onchange, } = attrs;
+    // Initialize single range value
+    const currentValue = initialValue !== undefined ? initialValue : state.singleValue || min;
+    if (state.singleValue === undefined) {
+        state.singleValue = currentValue;
+    }
+    const percentage = getPercentage(state.singleValue, min, max);
+    // Only keep dynamic styles as inline, use CSS classes for static styles
+    const containerStyle = vertical ? { height } : {};
+    const progressStyle = vertical
+        ? {
+            height: `${percentage}%`,
+        }
+        : {
+            width: `${percentage}%`,
+        };
+    const thumbStyle = vertical
+        ? {
+            bottom: `${percentage}%`,
+        }
+        : {
+            left: `${percentage}%`,
+            marginLeft: '-10px', // Half of thumb size (20px)
+        };
+    const updateSingleValue = (newValue, immediate = false) => {
+        state.singleValue = newValue;
+        if (immediate && oninput) {
+            oninput(newValue);
+        }
+        else if (!immediate && onchange) {
+            onchange(newValue);
+        }
+    };
+    const handleMouseDown = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        state.isDragging = true;
+        // Get container reference from the current target's parent
+        const thumbElement = e.currentTarget;
+        const container = thumbElement.parentElement;
+        if (!container)
+            return;
+        const handleMouseMove = (e) => {
+            if (!state.isDragging || !container)
+                return;
+            const rect = container.getBoundingClientRect();
+            let percentage;
+            if (vertical) {
+                percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+            }
+            else {
+                percentage = ((e.clientX - rect.left) / rect.width) * 100;
+            }
+            percentage = Math.max(0, Math.min(100, percentage));
+            const value = min + (percentage / 100) * (max - min);
+            const steppedValue = Math.round(value / step) * step;
+            updateSingleValue(steppedValue, true);
+            // Redraw to update the UI during drag
+            m.redraw();
+        };
+        const handleMouseUp = () => {
+            state.isDragging = false;
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            // Fire onchange when dragging ends
+            updateSingleValue(state.singleValue, false);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+    const orientation = vertical ? 'vertical' : 'horizontal';
+    // Determine tooltip position for vertical sliders
+    const tooltipPosition = vertical ? (tooltipPos === 'top' || tooltipPos === 'bottom' ? 'right' : tooltipPos) : tooltipPos;
+    return m('.input-field', { className: cn, style }, [
+        iconName ? m('i.material-icons.prefix', iconName) : undefined,
+        // Hidden input for label association and accessibility
+        m('input[type=range]', {
+            id,
+            value: state.singleValue,
+            min,
+            max,
+            step,
+            style: { display: 'none' },
+            disabled,
+            tabindex: -1,
+        }),
+        m('div', { class: fieldClass, style: containerStyle }, [
+            m(`.single-range-slider.${orientation}`, {
+                tabindex: disabled ? -1 : 0,
+                role: 'slider',
+                'aria-valuemin': min,
+                'aria-valuemax': max,
+                'aria-valuenow': state.singleValue,
+                'aria-label': label || 'Range slider',
+                onclick: (e) => {
+                    // Focus the slider when clicked
+                    e.currentTarget.focus();
+                },
+                onkeydown: (e) => {
+                    if (disabled)
+                        return;
+                    let newValue = state.singleValue;
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            newValue = Math.max(min, newValue - step);
+                            updateSingleValue(newValue, false);
+                            // m.redraw();
+                            break;
+                        case 'ArrowRight':
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            newValue = Math.min(max, newValue + step);
+                            updateSingleValue(newValue, false);
+                            // m.redraw();
+                            break;
+                        case 'Home':
+                            e.preventDefault();
+                            updateSingleValue(min, false);
+                            // m.redraw();
+                            break;
+                        case 'End':
+                            e.preventDefault();
+                            updateSingleValue(max, false);
+                            // m.redraw();
+                            break;
+                    }
+                },
+            }, [
+                // Track
+                m(`.track.${orientation}`),
+                // Progress
+                m(`.range-progress.${orientation}`, { style: progressStyle }),
+                // Thumb
+                m(`.thumb.${orientation}`, {
+                    style: thumbStyle,
+                    onmousedown: handleMouseDown,
+                }, showValue
+                    ? m(`.value-tooltip.${tooltipPosition}`, state.singleValue.toFixed(0))
+                    : null),
+            ]),
+        ]),
+        label
+            ? m(Label, {
+                label,
+                id,
+                isMandatory,
+                isActive: true, // Range sliders always have active labels
+            })
+            : null,
+        helperText ? m(HelperText, { helperText }) : null,
+    ]);
+};
+// Double Range Slider (Min/Max)
+const renderMinMaxRange = (attrs, state, cn, style, iconName, id, label, isMandatory, helperText) => {
+    const { min = 0, max = 100, step = 1, minValue, maxValue, vertical = false, showValue = false, height = '200px', disabled = false, } = attrs;
+    // Initialize range values
+    const currentMinValue = minValue !== undefined ? minValue : attrs.minValue || min;
+    const currentMaxValue = maxValue !== undefined ? maxValue : attrs.maxValue || max;
+    if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
+        state.rangeMinValue = currentMinValue;
+        state.rangeMaxValue = currentMaxValue;
+    }
+    // Initialize active thumb if not set
+    if (state.activeThumb === null) {
+        state.activeThumb = 'min';
+    }
+    const minPercentage = getPercentage(state.rangeMinValue, min, max);
+    const maxPercentage = getPercentage(state.rangeMaxValue, min, max);
+    // Only keep dynamic styles as inline, use CSS classes for static styles
+    const containerStyle = vertical ? { height } : {};
+    const rangeStyle = vertical
+        ? {
+            bottom: `${minPercentage}%`,
+            height: `${maxPercentage - minPercentage}%`,
+        }
+        : {
+            left: `${minPercentage}%`,
+            width: `${maxPercentage - minPercentage}%`,
+        };
+    // Only keep dynamic positioning and z-index as inline styles
+    const createThumbStyle = (percentage, isActive) => vertical
+        ? {
+            bottom: `${percentage}%`,
+            zIndex: isActive ? 10 : 5,
+        }
+        : {
+            left: `${percentage}%`,
+            marginLeft: '-10px', // Half of thumb size (20px)
+            zIndex: isActive ? 10 : 5,
+        };
+    const handleMouseDown = (thumb) => (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        state.isDragging = true;
+        state.activeThumb = thumb;
+        // Get container reference from the current target's parent
+        const thumbElement = e.currentTarget;
+        const container = thumbElement.parentElement;
+        if (!container)
+            return;
+        const handleMouseMove = (e) => {
+            if (!state.isDragging || !container)
+                return;
+            const rect = container.getBoundingClientRect();
+            let percentage;
+            if (vertical) {
+                percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+            }
+            else {
+                percentage = ((e.clientX - rect.left) / rect.width) * 100;
+            }
+            percentage = Math.max(0, Math.min(100, percentage));
+            const value = min + (percentage / 100) * (max - min);
+            const steppedValue = Math.round(value / step) * step;
+            if (thumb === 'min') {
+                updateRangeValues(Math.min(steppedValue, state.rangeMaxValue), state.rangeMaxValue, attrs, state, true);
+            }
+            else {
+                updateRangeValues(state.rangeMinValue, Math.max(steppedValue, state.rangeMinValue), attrs, state, true);
+            }
+            // Redraw to update the UI during drag
+            m.redraw();
+        };
+        const handleMouseUp = () => {
+            state.isDragging = false;
+            state.activeThumb = null;
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            // Fire onchange when dragging ends
+            updateRangeValues(state.rangeMinValue, state.rangeMaxValue, attrs, state, false);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    };
+    const fieldClass = vertical ? 'range-field vertical' : 'range-field';
+    const orientation = vertical ? 'vertical' : 'horizontal';
+    return m('.input-field', { className: cn, style }, [
+        iconName ? m('i.material-icons.prefix', iconName) : undefined,
+        // Hidden inputs for label association and accessibility
+        m('input[type=range]', {
+            id,
+            value: state.rangeMinValue,
+            min,
+            max,
+            step,
+            style: { display: 'none' },
+            disabled,
+            tabindex: -1,
+        }),
+        m('input[type=range]', {
+            id: `${id}_max`,
+            value: state.rangeMaxValue,
+            min,
+            max,
+            step,
+            style: { display: 'none' },
+            disabled,
+            tabindex: -1,
+        }),
+        m(`div`, { className: fieldClass }, [
+            m(`.double-range-slider.${orientation}`, {
+                style: containerStyle,
+                tabindex: disabled ? -1 : 0,
+                role: 'slider',
+                'aria-valuemin': min,
+                'aria-valuemax': max,
+                'aria-valuenow': state.rangeMinValue,
+                'aria-valuetext': `${state.rangeMinValue} to ${state.rangeMaxValue}`,
+                'aria-label': label || 'Range slider',
+                onclick: (e) => {
+                    // Focus the slider when clicked
+                    e.currentTarget.focus();
+                },
+                onkeydown: (e) => {
+                    if (disabled)
+                        return;
+                    let newMinValue = state.rangeMinValue;
+                    let newMaxValue = state.rangeMaxValue;
+                    const activeThumb = state.activeThumb || 'min';
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'ArrowDown':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                newMinValue = Math.max(min, newMinValue - step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                newMaxValue = Math.max(newMinValue, newMaxValue - step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                        case 'ArrowRight':
+                        case 'ArrowUp':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                newMinValue = Math.min(newMaxValue, newMinValue + step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                newMaxValue = Math.min(max, newMaxValue + step);
+                                updateRangeValues(newMinValue, newMaxValue, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                        case 'Tab':
+                            // Handle Tab navigation properly
+                            if (activeThumb === 'min') {
+                                if (e.shiftKey) {
+                                    // Shift+Tab from min thumb: go to previous element (let browser handle)
+                                    return; // Don't prevent default
+                                }
+                                else {
+                                    // Tab from min thumb: go to max thumb
+                                    e.preventDefault();
+                                    state.activeThumb = 'max';
+                                }
+                            }
+                            else { // activeThumb === 'max'
+                                if (e.shiftKey) {
+                                    // Shift+Tab from max thumb: go to min thumb
+                                    e.preventDefault();
+                                    state.activeThumb = 'min';
+                                }
+                                else {
+                                    // Tab from max thumb: go to next element (let browser handle)
+                                    return; // Don't prevent default
+                                }
+                            }
+                            break;
+                        case 'Home':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                updateRangeValues(min, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                updateRangeValues(newMinValue, newMinValue, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                        case 'End':
+                            e.preventDefault();
+                            if (activeThumb === 'min') {
+                                updateRangeValues(newMaxValue, newMaxValue, attrs, state, false);
+                            }
+                            else {
+                                updateRangeValues(newMinValue, max, attrs, state, false);
+                            }
+                            // m.redraw();
+                            break;
+                    }
+                },
+            }, [
+                // Track
+                m(`.track.${orientation}`),
+                // Range
+                m(`.range.${orientation}`, { style: rangeStyle }),
+                // Min thumb
+                m(`.thumb.${orientation}.min-thumb${state.activeThumb === 'min' ? '.active' : ''}`, {
+                    style: createThumbStyle(minPercentage, state.activeThumb === 'min'),
+                    onmousedown: handleMouseDown('min'),
+                    onclick: () => {
+                        state.activeThumb = 'min';
+                        // m.redraw();
+                    },
+                }, showValue ? m(`.value.${orientation}`, state.rangeMinValue.toFixed(0)) : null),
+                // Max thumb
+                m(`.thumb.${orientation}.max-thumb${state.activeThumb === 'max' ? '.active' : ''}`, {
+                    style: createThumbStyle(maxPercentage, state.activeThumb === 'max'),
+                    onmousedown: handleMouseDown('max'),
+                    onclick: () => {
+                        state.activeThumb = 'max';
+                        // m.redraw();
+                    },
+                }, showValue ? m(`.value.${orientation}`, state.rangeMaxValue.toFixed(0)) : null),
+            ]),
+        ]),
+        label
+            ? m(Label, {
+                label,
+                id,
+                isMandatory,
+                isActive: true, // Range sliders always have active labels
+            })
+            : null,
+        helperText ? m(HelperText, { helperText }) : null,
+    ]);
+};
+
 /**
  * Pure TypeScript MaterialBox - creates an image lightbox that fills the screen when clicked
  * No MaterializeCSS dependencies
@@ -3529,7 +4370,7 @@ const MaterialBox = () => {
         view: ({ attrs }) => {
             const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
             return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
-                height, className: ['materialboxed', className].filter(Boolean).join(' '), style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
                     e.preventDefault();
                     openBox(e.target, attrs);
                 } }));
@@ -3611,7 +4452,7 @@ const ModalPanel = () => {
                 .filter(Boolean)
                 .join(' ')
                 .trim();
-            const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim();
+            const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined;
             return m('div', { className: 'modal-container' }, [
                 // Modal overlay
                 m('div', {
@@ -3636,23 +4477,25 @@ const ModalPanel = () => {
                     role: 'dialog',
                     'aria-labelledby': `${id}-title`,
                     'aria-describedby': description ? `${id}-desc` : undefined,
-                    style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet ? {
-                        // Bottom sheet positioning
-                        top: 'auto',
-                        bottom: '0',
-                        left: '0',
-                        right: '0',
-                        transform: 'none',
-                        maxWidth: '100%',
-                        borderRadius: '8px 8px 0 0',
-                    } : {
-                        // Regular modal positioning
-                        top: '50%',
-                        left: '50%',
-                        transform: 'translate(-50%, -50%)',
-                        maxWidth: '75%',
-                        borderRadius: '4px',
-                    })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
+                    style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet
+                        ? {
+                            // Bottom sheet positioning
+                            top: 'auto',
+                            bottom: '0',
+                            left: '0',
+                            right: '0',
+                            transform: 'none',
+                            maxWidth: '100%',
+                            borderRadius: '8px 8px 0 0',
+                        }
+                        : {
+                            // Regular modal positioning
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            maxWidth: '75%',
+                            borderRadius: '4px',
+                        })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
                     onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                 }, [
                     // Close button
@@ -4690,7 +5533,7 @@ const RadioButtons = () => {
                     callback(propId);
                 }
             };
-            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
             const optionsContent = layout === 'horizontal'
                 ? m('div.grid-container', options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
                     groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` }))))
@@ -4963,7 +5806,7 @@ const Switch = () => {
         view: ({ attrs }) => {
             const id = attrs.id || state.id;
             const { label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
-            const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+            const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
             return m('div', {
                 className: cn,
                 onclick: (e) => {
@@ -5114,7 +5957,7 @@ const Tabs = () => {
         },
         view: ({ attrs }) => {
             const { tabWidth, tabs, className, style, swipeable = false } = attrs;
-            const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim();
+            const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim() || undefined;
             const anchoredTabs = tabs.map(toAnchored());
             const activeTab = setActiveTabId(anchoredTabs, attrs.selectedTabId);
             updateIndicator();
@@ -6100,8 +6943,8 @@ const FileUpload = () => {
         }
         // Check file type
         if (attrs.accept) {
-            const acceptedTypes = attrs.accept.split(',').map(type => type.trim());
-            const isAccepted = acceptedTypes.some(acceptedType => {
+            const acceptedTypes = attrs.accept.split(',').map((type) => type.trim());
+            const isAccepted = acceptedTypes.some((acceptedType) => {
                 if (acceptedType.startsWith('.')) {
                     // Extension check
                     return file.name.toLowerCase().endsWith(acceptedType.toLowerCase());
@@ -6161,11 +7004,11 @@ const FileUpload = () => {
         }
         // Notify parent component
         if (attrs.onFilesSelected) {
-            attrs.onFilesSelected(state.files.filter(f => !f.uploadError));
+            attrs.onFilesSelected(state.files.filter((f) => !f.uploadError));
         }
     };
     const removeFile = (fileToRemove, attrs) => {
-        state.files = state.files.filter(file => file !== fileToRemove);
+        state.files = state.files.filter((file) => file !== fileToRemove);
         if (attrs.onFileRemoved) {
             attrs.onFileRemoved(fileToRemove);
         }
@@ -6184,11 +7027,11 @@ const FileUpload = () => {
                 id: uniqueId(),
                 files: [],
                 isDragOver: false,
-                isUploading: false
+                isUploading: false,
             };
         },
         view: ({ attrs }) => {
-            const { accept, multiple = false, disabled = false, label = 'Choose files or drag them here', helperText, showPreview = true, className = '', error } = attrs;
+            const { accept, multiple = false, disabled = false, label = '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', {
@@ -6196,8 +7039,10 @@ const FileUpload = () => {
                         state.isDragOver ? 'drag-over' : '',
                         disabled ? 'disabled' : '',
                         error ? 'error' : '',
-                        state.files.length > 0 ? 'has-files' : ''
-                    ].filter(Boolean).join(' '),
+                        state.files.length > 0 ? 'has-files' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' ') || undefined,
                     ondragover: (e) => {
                         if (disabled)
                             return;
@@ -6228,7 +7073,7 @@ const FileUpload = () => {
                             return;
                         const input = document.getElementById(state.id);
                         input === null || input === void 0 ? void 0 : input.click();
-                    }
+                    },
                 }, [
                     m('input[type="file"]', {
                         id: state.id,
@@ -6241,57 +7086,55 @@ const FileUpload = () => {
                             if (target.files) {
                                 handleFiles(target.files, attrs);
                             }
-                        }
+                        },
                     }),
                     m('.file-upload-content', [
                         m('i.material-icons.file-upload-icon', 'cloud_upload'),
                         m('p.file-upload-label', label),
                         helperText && m('p.file-upload-helper', helperText),
-                        accept && m('p.file-upload-types', `Accepted: ${accept}`)
-                    ])
+                        accept && m('p.file-upload-types', `Accepted: ${accept}`),
+                    ]),
                 ]),
                 // Error message
                 error && m('.file-upload-error', error),
                 // File list
-                state.files.length > 0 && m('.file-upload-list', [
-                    m('h6', 'Selected Files:'),
-                    state.files.map(file => m('.file-upload-item', { key: file.name + file.size }, [
-                        // Preview thumbnail
-                        showPreview && file.preview && m('.file-preview', [
-                            m('img', { src: file.preview, alt: file.name })
-                        ]),
-                        // File info
-                        m('.file-info', [
-                            m('.file-name', file.name),
-                            m('.file-details', [
-                                m('span.file-size', formatFileSize(file.size)),
-                                file.type && m('span.file-type', file.type)
-                            ]),
-                            // Progress bar (if uploading)
-                            file.uploadProgress !== undefined && m('.file-progress', [
-                                m('.progress', [
-                                    m('.determinate', {
-                                        style: { width: `${file.uploadProgress}%` }
-                                    })
-                                ])
+                state.files.length > 0 &&
+                    m('.file-upload-list', [
+                        m('h6', 'Selected Files:'),
+                        state.files.map((file) => m('.file-upload-item', { key: file.name + file.size }, [
+                            // Preview thumbnail
+                            showPreview && file.preview && m('.file-preview', [m('img', { src: file.preview, alt: file.name })]),
+                            // File info
+                            m('.file-info', [
+                                m('.file-name', file.name),
+                                m('.file-details', [
+                                    m('span.file-size', formatFileSize(file.size)),
+                                    file.type && m('span.file-type', file.type),
+                                ]),
+                                // Progress bar (if uploading)
+                                file.uploadProgress !== undefined &&
+                                    m('.file-progress', [
+                                        m('.progress', [
+                                            m('.determinate', {
+                                                style: { width: `${file.uploadProgress}%` },
+                                            }),
+                                        ]),
+                                    ]),
+                                // Error message
+                                file.uploadError && m('.file-error', file.uploadError),
                             ]),
-                            // Error message
-                            file.uploadError && m('.file-error', file.uploadError)
-                        ]),
-                        // Remove button
-                        m('button.btn-flat.file-remove', {
-                            onclick: (e) => {
-                                e.stopPropagation();
-                                removeFile(file, attrs);
-                            },
-                            title: 'Remove file'
-                        }, [
-                            m('i.material-icons', 'close')
-                        ])
-                    ]))
-                ])
+                            // Remove button
+                            m('button.btn-flat.file-remove', {
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                    removeFile(file, attrs);
+                                },
+                                title: 'Remove file',
+                            }, [m('i.material-icons', 'close')]),
+                        ])),
+                    ]),
             ]);
-        }
+        },
     };
 };
 
@@ -6321,7 +7164,7 @@ const Sidenav = () => {
             state = {
                 id: attrs.id || uniqueId(),
                 isOpen: attrs.isOpen || false,
-                isAnimating: false
+                isAnimating: false,
             };
             // Set up keyboard listener
             if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
@@ -6350,34 +7193,33 @@ const Sidenav = () => {
             }
         },
         view: ({ attrs, children }) => {
-            const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false } = attrs;
+            const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, } = attrs;
             const isOpen = state.isOpen;
             return [
                 // Backdrop (using existing materialize class)
-                showBackdrop && mode === 'overlay' && m('.sidenav-overlay', {
-                    style: {
-                        display: isOpen ? 'block' : 'none',
-                        opacity: isOpen ? '1' : '0'
-                    },
-                    onclick: () => handleBackdropClick(attrs)
-                }),
+                showBackdrop &&
+                    mode === 'overlay' &&
+                    m('.sidenav-overlay', {
+                        style: {
+                            display: isOpen ? 'block' : 'none',
+                            opacity: isOpen ? '1' : '0',
+                        },
+                        onclick: () => handleBackdropClick(attrs),
+                    }),
                 // Sidenav (using existing materialize structure)
                 m('ul.sidenav', {
                     id: state.id,
-                    class: [
-                        position === 'right' ? 'right-aligned' : '',
-                        fixed ? 'sidenav-fixed' : '',
-                        className
-                    ].filter(Boolean).join(' '),
+                    class: [position === 'right' ? 'right-aligned' : '', fixed ? 'sidenav-fixed' : '', className]
+                        .filter(Boolean)
+                        .join(' ') || undefined,
                     style: {
                         width: `${width}px`,
-                        transform: isOpen ? 'translateX(0)' :
-                            position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
-                        'transition-duration': `${animationDuration}ms`
-                    }
-                }, children)
+                        transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
+                        'transition-duration': `${animationDuration}ms`,
+                    },
+                }, children),
             ];
-        }
+        },
     };
 };
 /**
@@ -6387,37 +7229,30 @@ const Sidenav = () => {
 const SidenavItem = () => {
     return {
         view: ({ attrs, children }) => {
-            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false } = attrs;
+            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, } = attrs;
             if (divider) {
                 return m('li.divider');
             }
             if (subheader) {
                 return m('li.subheader', text || children);
             }
-            const itemClasses = [
-                active ? 'active' : '',
-                disabled ? 'disabled' : '',
-                className
-            ].filter(Boolean).join(' ');
-            const content = [
-                icon && m('i.material-icons', icon),
-                text || children
-            ];
+            const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', className].filter(Boolean).join(' ') || undefined;
+            const content = [icon && m('i.material-icons', icon), text || children];
             if (href && !disabled) {
                 return m('li', { class: itemClasses }, [
                     m('a', {
                         href,
-                        onclick: disabled ? undefined : onclick
-                    }, content)
+                        onclick: disabled ? undefined : onclick,
+                    }, content),
                 ]);
             }
             return m('li', { class: itemClasses }, [
                 m('a', {
                     onclick: disabled ? undefined : onclick,
-                    href: '#!'
-                }, content)
+                    href: '#!',
+                }, content),
             ]);
-        }
+        },
     };
 };
 /**
@@ -6468,7 +7303,7 @@ class SidenavManager {
 const Breadcrumb = () => {
     return {
         view: ({ attrs }) => {
-            const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false } = attrs;
+            const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false, } = attrs;
             if (items.length === 0) {
                 return null;
             }
@@ -6477,52 +7312,46 @@ const Breadcrumb = () => {
             if (maxItems && items.length > maxItems) {
                 const firstItem = items[0];
                 const lastItems = items.slice(-(maxItems - 2));
-                displayItems = [
-                    firstItem,
-                    { text: '...', disabled: true, className: 'breadcrumb-ellipsis' },
-                    ...lastItems
-                ];
+                displayItems = [firstItem, { text: '...', disabled: true, className: 'breadcrumb-ellipsis' }, ...lastItems];
             }
             return m('nav.breadcrumb', { class: className }, [
-                m('ol.breadcrumb-list', displayItems.map((item, index) => {
+                m('ol.breadcrumb-list', displayItems
+                    .map((item, index) => {
                     const isLast = index === displayItems.length - 1;
                     const isFirst = index === 0;
                     return [
                         // Breadcrumb item
                         m('li.breadcrumb-item', {
-                            class: [
-                                item.active || isLast ? 'active' : '',
-                                item.disabled ? 'disabled' : '',
-                                item.className || ''
-                            ].filter(Boolean).join(' ')
+                            class: [item.active || isLast ? 'active' : '', item.disabled ? 'disabled' : '', item.className || '']
+                                .filter(Boolean)
+                                .join(' ') || undefined,
                         }, [
-                            item.href && !item.disabled && !isLast ?
-                                // Link item
-                                m('a.breadcrumb-link', {
-                                    href: item.href,
-                                    onclick: item.onclick
-                                }, [
-                                    (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                    (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                    m('span.breadcrumb-text', item.text)
-                                ]) :
-                                // Text item (active or disabled)
-                                m('span.breadcrumb-text', {
-                                    onclick: item.disabled ? undefined : item.onclick
-                                }, [
-                                    (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                    (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                    item.text
-                                ])
+                            item.href && !item.disabled && !isLast
+                                ? // Link item
+                                    m('a.breadcrumb-link', {
+                                        href: item.href,
+                                        onclick: item.onclick,
+                                    }, [
+                                        showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                        showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                        m('span.breadcrumb-text', item.text),
+                                    ])
+                                : // Text item (active or disabled)
+                                    m('span.breadcrumb-text', {
+                                        onclick: item.disabled ? undefined : item.onclick,
+                                    }, [
+                                        showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                        showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                        item.text,
+                                    ]),
                         ]),
                         // Separator (except for last item)
-                        !isLast && m('li.breadcrumb-separator', [
-                            m('i.material-icons', separator)
-                        ])
+                        !isLast && m('li.breadcrumb-separator', [m('i.material-icons', separator)]),
                     ];
-                }).reduce((acc, val) => acc.concat(val), []))
+                })
+                    .reduce((acc, val) => acc.concat(val), [])),
             ]);
-        }
+        },
     };
 };
 /**
@@ -6535,7 +7364,7 @@ const createBreadcrumb = (path, basePath = '/') => {
     items.push({
         text: 'Home',
         href: basePath,
-        icon: 'home'
+        icon: 'home',
     });
     // Add path segments
     let currentPath = basePath;
@@ -6545,7 +7374,7 @@ const createBreadcrumb = (path, basePath = '/') => {
         items.push({
             text: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
             href: isLast ? undefined : currentPath,
-            active: isLast
+            active: isLast,
         });
     });
     return items;
@@ -6564,19 +7393,18 @@ class BreadcrumbManager {
         items.push({
             text: 'Home',
             href: '/',
-            icon: 'home'
+            icon: 'home',
         });
         let currentPath = '';
         segments.forEach((segment, index) => {
             currentPath += '/' + segment;
             const isLast = index === segments.length - 1;
             // Use custom text from config or format segment
-            const text = routeConfig[currentPath] ||
-                segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
+            const text = routeConfig[currentPath] || segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
             items.push({
                 text,
                 href: isLast ? undefined : currentPath,
-                active: isLast
+                active: isLast,
             });
         });
         return items;
@@ -6588,7 +7416,7 @@ class BreadcrumbManager {
         return hierarchy.map((item, index) => ({
             text: item[textKey],
             href: index === hierarchy.length - 1 ? undefined : item[pathKey],
-            active: index === hierarchy.length - 1
+            active: index === hierarchy.length - 1,
         }));
     }
 }
@@ -6722,7 +7550,7 @@ const Wizard = () => {
                                 hasError ? 'error' : '',
                                 step.disabled ? 'disabled' : '',
                                 step.optional ? 'optional' : ''
-                            ].filter(Boolean).join(' '),
+                            ].filter(Boolean).join(' ') || undefined,
                             onclick: allowHeaderNavigation && !step.disabled ?
                                 () => goToStep(index, attrs) : undefined
                         }, [
@@ -6796,6 +7624,292 @@ const Stepper = () => {
     };
 };
 
+// Utility function to check if a node is the last in its branch
+const isNodeLastInBranch = (nodePath, rootNodes) => {
+    // Navigate to the node's position and check if it's the last child at every level
+    let currentNodes = rootNodes;
+    for (let i = 0; i < nodePath.length; i++) {
+        const index = nodePath[i];
+        const isLastAtThisLevel = index === currentNodes.length - 1;
+        // If this is not the last child at this level, then this node is not last in branch
+        if (!isLastAtThisLevel) {
+            return false;
+        }
+        // Move to the next level if it exists
+        if (i < nodePath.length - 1) {
+            const currentNode = currentNodes[index];
+            if (currentNode.children) {
+                currentNodes = currentNode.children;
+            }
+        }
+    }
+    return true;
+};
+const TreeNodeComponent = () => {
+    return {
+        view: ({ attrs }) => {
+            const { node, level, isSelected, isExpanded, isFocused, showConnectors, iconType, selectionMode, onToggleExpand, onToggleSelect, onFocus, } = attrs;
+            const hasChildren = node.children && node.children.length > 0;
+            const indentLevel = level * 24; // 24px per level
+            return m('li.tree-node', {
+                class: [
+                    isSelected && 'selected',
+                    isFocused && 'focused',
+                    node.disabled && 'disabled',
+                    hasChildren && 'has-children',
+                    attrs.isLastInBranch && 'tree-last-in-branch',
+                ]
+                    .filter(Boolean)
+                    .join(' ') || undefined,
+                'data-node-id': node.id,
+                'data-level': level,
+            }, [
+                // Node content
+                m('.tree-node-content', {
+                    style: {
+                        paddingLeft: `${indentLevel}px`,
+                    },
+                    onclick: node.disabled
+                        ? undefined
+                        : () => {
+                            if (selectionMode !== 'none') {
+                                onToggleSelect(node.id);
+                            }
+                            onFocus(node.id);
+                        },
+                    onkeydown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            if (!node.disabled && selectionMode !== 'none') {
+                                onToggleSelect(node.id);
+                            }
+                        }
+                    },
+                    tabindex: node.disabled ? -1 : 0,
+                    role: selectionMode === 'multiple' ? 'option' : 'treeitem',
+                    'aria-selected': selectionMode !== 'none' ? isSelected.toString() : undefined,
+                    'aria-expanded': hasChildren ? isExpanded.toString() : undefined,
+                    'aria-disabled': node.disabled ? 'true' : undefined,
+                }, [
+                    // Connector lines
+                    showConnectors &&
+                        level > 0 &&
+                        m('.tree-connectors', Array.from({ length: level }, (_, i) => m('.tree-connector', {
+                            key: i,
+                            style: { left: `${i * 24 + 12}px` },
+                        }))),
+                    // Expand/collapse icon or spacer
+                    hasChildren
+                        ? m('.tree-expand-icon', {
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                if (!node.disabled) {
+                                    onToggleExpand(node.id);
+                                }
+                            },
+                            class: iconType,
+                        }, [
+                            iconType === 'plus-minus'
+                                ? m('span.tree-plus-minus', isExpanded ? '−' : '+')
+                                : iconType === 'triangle'
+                                    ? m('span.tree-triangle', { class: isExpanded ? 'expanded' : undefined }, '▶')
+                                    : iconType === 'chevron'
+                                        ? m(MaterialIcon, {
+                                            name: 'chevron',
+                                            direction: isExpanded ? 'down' : 'right',
+                                            class: 'tree-chevron-icon',
+                                        })
+                                        : m(MaterialIcon, {
+                                            name: 'caret',
+                                            direction: isExpanded ? 'down' : 'right',
+                                            class: 'tree-caret-icon',
+                                        }),
+                        ])
+                        : m('.tree-expand-spacer'), // Spacer for alignment
+                    // Selection indicator for multiple selection
+                    selectionMode === 'multiple' &&
+                        m('.tree-selection-indicator', [
+                            m('input[type=checkbox]', {
+                                checked: isSelected,
+                                disabled: node.disabled,
+                                onchange: () => {
+                                    if (!node.disabled) {
+                                        onToggleSelect(node.id);
+                                    }
+                                },
+                                onclick: (e) => e.stopPropagation(),
+                            }),
+                        ]),
+                    // Node icon (optional)
+                    node.icon && m('i.tree-node-icon.material-icons', node.icon),
+                    // Node label
+                    m('span.tree-node-label', node.label),
+                ]),
+                // Children (recursive)
+                hasChildren &&
+                    isExpanded &&
+                    m('ul.tree-children', {
+                        role: 'group',
+                        'aria-expanded': 'true',
+                    }, node.children.map((child, childIndex) => {
+                        var _a, _b, _c, _d, _e, _f;
+                        // Calculate state for each child using treeState
+                        const childIsSelected = (_b = (_a = attrs.treeState) === null || _a === void 0 ? void 0 : _a.selectedIds.has(child.id)) !== null && _b !== void 0 ? _b : false;
+                        const childIsExpanded = (_d = (_c = attrs.treeState) === null || _c === void 0 ? void 0 : _c.expandedIds.has(child.id)) !== null && _d !== void 0 ? _d : false;
+                        const childIsFocused = ((_e = attrs.treeState) === null || _e === void 0 ? void 0 : _e.focusedNodeId) === child.id;
+                        // Calculate if this child is last in branch
+                        const childPath = [...(attrs.currentPath || []), childIndex];
+                        const childIsLastInBranch = ((_f = attrs.treeAttrs) === null || _f === void 0 ? void 0 : _f.data) ?
+                            isNodeLastInBranch(childPath, attrs.treeAttrs.data) : false;
+                        return m(TreeNodeComponent, {
+                            key: child.id,
+                            node: child,
+                            level: level + 1,
+                            isSelected: childIsSelected,
+                            isExpanded: childIsExpanded,
+                            isFocused: childIsFocused,
+                            showConnectors,
+                            iconType,
+                            selectionMode,
+                            onToggleExpand,
+                            onToggleSelect,
+                            onFocus,
+                            isLastInBranch: childIsLastInBranch,
+                            currentPath: childPath,
+                            treeState: attrs.treeState,
+                            treeAttrs: attrs.treeAttrs,
+                        });
+                    })),
+            ]);
+        },
+    };
+};
+const TreeView = () => {
+    const state = {
+        selectedIds: new Set(),
+        expandedIds: new Set(),
+        focusedNodeId: null,
+        treeMap: new Map(),
+    };
+    const buildTreeMap = (nodes, map) => {
+        nodes.forEach((node) => {
+            map.set(node.id, node);
+            if (node.children) {
+                buildTreeMap(node.children, map);
+            }
+        });
+    };
+    const initializeExpandedNodes = (nodes) => {
+        nodes.forEach((node) => {
+            if (node.expanded) {
+                state.expandedIds.add(node.id);
+            }
+            if (node.children) {
+                initializeExpandedNodes(node.children);
+            }
+        });
+    };
+    const handleToggleExpand = (nodeId, attrs) => {
+        var _a;
+        const isExpanded = state.expandedIds.has(nodeId);
+        if (isExpanded) {
+            state.expandedIds.delete(nodeId);
+        }
+        else {
+            state.expandedIds.add(nodeId);
+        }
+        (_a = attrs.onexpand) === null || _a === void 0 ? void 0 : _a.call(attrs, { nodeId, expanded: !isExpanded });
+    };
+    const handleToggleSelect = (nodeId, attrs) => {
+        var _a;
+        const { selectionMode = 'single' } = attrs;
+        if (selectionMode === 'single') {
+            state.selectedIds.clear();
+            state.selectedIds.add(nodeId);
+        }
+        else if (selectionMode === 'multiple') {
+            if (state.selectedIds.has(nodeId)) {
+                state.selectedIds.delete(nodeId);
+            }
+            else {
+                state.selectedIds.add(nodeId);
+            }
+        }
+        (_a = attrs.onselection) === null || _a === void 0 ? void 0 : _a.call(attrs, Array.from(state.selectedIds));
+    };
+    const handleFocus = (nodeId) => {
+        state.focusedNodeId = nodeId;
+    };
+    const renderNodes = (nodes, attrs, level = 0, parentPath = []) => {
+        return nodes.map((node, index) => {
+            var _a, _b, _c;
+            const isSelected = state.selectedIds.has(node.id);
+            const isExpanded = state.expandedIds.has(node.id);
+            const isFocused = state.focusedNodeId === node.id;
+            const currentPath = [...parentPath, index];
+            const isLastInBranch = isNodeLastInBranch(currentPath, attrs.data);
+            return m(TreeNodeComponent, {
+                key: node.id,
+                node,
+                level,
+                isSelected,
+                isExpanded,
+                isFocused,
+                showConnectors: (_a = attrs.showConnectors) !== null && _a !== void 0 ? _a : true,
+                iconType: (_b = attrs.iconType) !== null && _b !== void 0 ? _b : 'caret',
+                selectionMode: (_c = attrs.selectionMode) !== null && _c !== void 0 ? _c : 'single',
+                onToggleExpand: (nodeId) => handleToggleExpand(nodeId, attrs),
+                onToggleSelect: (nodeId) => handleToggleSelect(nodeId, attrs),
+                onFocus: handleFocus,
+                isLastInBranch,
+                currentPath,
+                // Pass state and attrs for recursive rendering
+                treeState: state,
+                treeAttrs: attrs,
+            });
+        });
+    };
+    return {
+        oninit: ({ attrs }) => {
+            // Build internal tree map for efficient lookups
+            buildTreeMap(attrs.data, state.treeMap);
+            // Initialize expanded nodes from data
+            initializeExpandedNodes(attrs.data);
+            // Initialize selected nodes from props
+            if (attrs.selectedIds) {
+                state.selectedIds = new Set(attrs.selectedIds);
+            }
+        },
+        onupdate: ({ attrs }) => {
+            // Sync selectedIds prop with internal state
+            if (attrs.selectedIds) {
+                const newSelection = new Set(attrs.selectedIds);
+                if (newSelection.size !== state.selectedIds.size ||
+                    !Array.from(newSelection).every((id) => state.selectedIds.has(id))) {
+                    state.selectedIds = newSelection;
+                }
+            }
+        },
+        view: ({ attrs }) => {
+            const { data, className, style, id, selectionMode = 'single', showConnectors = true } = attrs;
+            return m('div.tree-view', {
+                class: [
+                    className,
+                    showConnectors && 'show-connectors'
+                ].filter(Boolean).join(' ') || undefined,
+                style,
+                id,
+                role: selectionMode === 'multiple' ? 'listbox' : 'tree',
+                'aria-multiselectable': selectionMode === 'multiple' ? 'true' : 'false',
+            }, [
+                m('ul.tree-root', {
+                    role: 'group',
+                }, renderNodes(data, attrs)),
+            ]);
+        },
+    };
+};
+
 /**
  * @fileoverview Core TypeScript utility types for mithril-materialized library
  * These types improve type safety and developer experience across all components
@@ -6817,4 +7931,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, ModalPanel, NumberInput, Options, Pagination, PaginationControls, 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, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };
+export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, Pagination, PaginationControls, 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, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, renderMinMaxRange, renderSingleRangeWithTooltip, toast, uniqueId, uuid4 };