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

package/dist/index.umd.js

@@ -38,6 +38,7 @@
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
+    // Utility functions for the library
     /**
      * Create a unique ID
      * @see https://stackoverflow.com/a/2117523/319711
@@ -1344,6 +1345,709 @@
         };
     };
 
+    const defaultI18n = {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok',
+        previousMonth: '\u2039',
+        nextMonth: '\u203a',
+        months: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ],
+        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    };
+    // Utility functions based on Materialize CSS implementation
+    const isDate = (obj) => {
+        return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+    };
+    const isWeekend = (date) => {
+        const day = date.getDay();
+        return day === 0 || day === 6;
+    };
+    const setToStartOfDay = (date) => {
+        if (isDate(date))
+            date.setHours(0, 0, 0, 0);
+    };
+    const getDaysInMonth = (year, month) => {
+        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+    };
+    const isLeapYear = (year) => {
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    };
+    const compareDates = (a, b) => {
+        return a.getTime() === b.getTime();
+    };
+    // Week number calculation utilities
+    const getWeekNumber = (date, weekNumbering, firstDay) => {
+        if (weekNumbering === 'iso') {
+            return getISOWeekNumber(date);
+        }
+        else {
+            return getLocalWeekNumber(date, firstDay);
+        }
+    };
+    const getISOWeekNumber = (date) => {
+        // ISO 8601 week numbering
+        const tempDate = new Date(date.getTime());
+        const dayNum = (date.getDay() + 6) % 7; // Make Monday = 0
+        tempDate.setDate(tempDate.getDate() - dayNum + 3); // Thursday in target week
+        const firstThursday = new Date(tempDate.getFullYear(), 0, 4); // First Thursday of year
+        const firstThursdayDayNum = (firstThursday.getDay() + 6) % 7; // Make Monday = 0
+        firstThursday.setDate(firstThursday.getDate() - firstThursdayDayNum + 3);
+        return Math.ceil((tempDate.getTime() - firstThursday.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+    };
+    const getLocalWeekNumber = (date, firstDay) => {
+        // Local week numbering based on firstDay setting
+        const tempDate = new Date(date.getFullYear(), 0, 1);
+        const firstDayOfYear = tempDate.getDay();
+        // Calculate days from first day of year to the start of first week
+        let daysToFirstWeek = (firstDay - firstDayOfYear + 7) % 7;
+        if (daysToFirstWeek === 0 && firstDayOfYear !== firstDay) {
+            daysToFirstWeek = 7;
+        }
+        const firstWeekStart = new Date(tempDate.getTime());
+        firstWeekStart.setDate(1 + daysToFirstWeek);
+        if (date < firstWeekStart) {
+            // Date is in the last week of previous year
+            return getLocalWeekNumber(new Date(date.getFullYear() - 1, 11, 31), firstDay);
+        }
+        const daysDiff = Math.floor((date.getTime() - firstWeekStart.getTime()) / (24 * 60 * 60 * 1000));
+        return Math.floor(daysDiff / 7) + 1;
+    };
+    /**
+     * Enhanced DatePicker component based on Materialize CSS datepicker
+     */
+    const DatePicker = () => {
+        let state;
+        const mergeOptions = (attrs) => {
+            // Handle HTML attributes
+            let yearRange = 10;
+            if (attrs.yearrange) {
+                const parts = attrs.yearrange.split(',');
+                if (parts.length === 2) {
+                    yearRange = [parseInt(parts[0], 10), parseInt(parts[1], 10)];
+                }
+            }
+            else if (attrs.yearRange) {
+                yearRange = attrs.yearRange;
+            }
+            // Handle format - priority: format attribute > displayFormat > default
+            let finalFormat = 'mmm dd, yyyy';
+            if (attrs.format) {
+                finalFormat = attrs.format;
+            }
+            else if (attrs.displayFormat) {
+                finalFormat = attrs.displayFormat;
+            }
+            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
+            // Merge i18n properly
+            merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+            return merged;
+        };
+        const toString = (date, format) => {
+            if (!date || !isDate(date)) {
+                return '';
+            }
+            // Split format into tokens - match longer patterns first
+            const formatTokens = /(dddd|ddd|dd|d|mmmm|mmm|mm|m|yyyy|yy)/g;
+            let result = format;
+            // Replace all format tokens with actual values
+            result = result.replace(formatTokens, (match) => {
+                if (state.formats[match]) {
+                    return String(state.formats[match]());
+                }
+                return match;
+            });
+            return result;
+        };
+        const setDate = (date, preventOnSelect = false, options) => {
+            if (!date) {
+                state.date = null;
+                return;
+            }
+            if (typeof date === 'string') {
+                date = new Date(Date.parse(date));
+            }
+            if (!isDate(date)) {
+                return;
+            }
+            const min = options.minDate;
+            const max = options.maxDate;
+            if (isDate(min) && date < min) {
+                date = min;
+            }
+            else if (isDate(max) && date > max) {
+                date = max;
+            }
+            state.date = new Date(date.getTime());
+            setToStartOfDay(state.date);
+            gotoDate(state.date);
+            if (!preventOnSelect && options.onSelect) {
+                options.onSelect(state.date);
+            }
+        };
+        const gotoDate = (date) => {
+            if (!isDate(date)) {
+                return;
+            }
+            state.calendars = [
+                {
+                    month: date.getMonth(),
+                    year: date.getFullYear(),
+                },
+            ];
+        };
+        const nextMonth = () => {
+            state.calendars[0].month++;
+            adjustCalendars();
+        };
+        const prevMonth = () => {
+            state.calendars[0].month--;
+            adjustCalendars();
+        };
+        const adjustCalendars = () => {
+            state.calendars[0] = adjustCalendar(state.calendars[0]);
+        };
+        const adjustCalendar = (calendar) => {
+            if (calendar.month < 0) {
+                calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+                calendar.month += 12;
+            }
+            if (calendar.month > 11) {
+                calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+                calendar.month -= 12;
+            }
+            return calendar;
+        };
+        const Day = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { opts, options } = attrs;
+                    const arr = [];
+                    let ariaSelected = 'false';
+                    if (opts.isEmpty) {
+                        if (opts.showDaysInNextAndPreviousMonths) {
+                            arr.push('is-outside-current-month');
+                            arr.push('is-selection-disabled');
+                        }
+                        else {
+                            return m('td.is-empty');
+                        }
+                    }
+                    if (opts.isDisabled) {
+                        arr.push('is-disabled');
+                    }
+                    if (opts.isToday) {
+                        arr.push('is-today');
+                    }
+                    if (opts.isSelected) {
+                        arr.push('is-selected');
+                        ariaSelected = 'true';
+                    }
+                    if (opts.hasEvent) {
+                        arr.push('has-event');
+                    }
+                    return m('td', {
+                        'data-day': opts.day,
+                        class: arr.join(' '),
+                        'aria-selected': ariaSelected,
+                    }, [
+                        m('button.datepicker-day-button', {
+                            type: 'button',
+                            'data-year': opts.year,
+                            'data-month': opts.month,
+                            'data-day': opts.day,
+                            onclick: (e) => {
+                                const target = e.target;
+                                if (!opts.isDisabled) {
+                                    const year = parseInt(target.getAttribute('data-year') || '0', 10);
+                                    const month = parseInt(target.getAttribute('data-month') || '0', 10);
+                                    const day = parseInt(target.getAttribute('data-day') || '0', 10);
+                                    const selectedDate = new Date(year, month, day);
+                                    setDate(selectedDate, false, options);
+                                    if (options.autoClose) {
+                                        state.isOpen = false;
+                                    }
+                                }
+                            },
+                        }, opts.day),
+                    ]);
+                }
+            };
+        };
+        const Calendar = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { year, month, options, randId } = attrs;
+                    const now = new Date();
+                    const days = getDaysInMonth(year, month);
+                    let before = new Date(year, month, 1).getDay();
+                    const data = [];
+                    let row = [];
+                    setToStartOfDay(now);
+                    if (options.firstDay > 0) {
+                        before -= options.firstDay;
+                        if (before < 0) {
+                            before += 7;
+                        }
+                    }
+                    const previousMonth = month === 0 ? 11 : month - 1;
+                    const nextMonth = month === 11 ? 0 : month + 1;
+                    const yearOfPreviousMonth = month === 0 ? year - 1 : year;
+                    const yearOfNextMonth = month === 11 ? year + 1 : year;
+                    const daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
+                    let cells = days + before;
+                    let after = cells;
+                    while (after > 7) {
+                        after -= 7;
+                    }
+                    cells += 7 - after;
+                    for (let i = 0, r = 0; i < cells; i++) {
+                        const day = new Date(year, month, 1 + (i - before));
+                        const isSelected = isDate(state.date) ? compareDates(day, state.date) : false;
+                        const isToday = compareDates(day, now);
+                        const isEmpty = i < before || i >= days + before;
+                        let dayNumber = 1 + (i - before);
+                        let monthNumber = month;
+                        let yearNumber = year;
+                        if (isEmpty) {
+                            if (i < before) {
+                                dayNumber = daysInPreviousMonth + dayNumber;
+                                monthNumber = previousMonth;
+                                yearNumber = yearOfPreviousMonth;
+                            }
+                            else {
+                                dayNumber = dayNumber - days;
+                                monthNumber = nextMonth;
+                                yearNumber = yearOfNextMonth;
+                            }
+                        }
+                        const isDisabled = (options.minDate && day < options.minDate) ||
+                            (options.maxDate && day > options.maxDate) ||
+                            (options.disableWeekends && isWeekend(day)) ||
+                            (options.disableDayFn && options.disableDayFn(day));
+                        const dayConfig = {
+                            day: dayNumber,
+                            month: monthNumber,
+                            year: yearNumber,
+                            hasEvent: false,
+                            isSelected: isSelected,
+                            isToday: isToday,
+                            isDisabled: isDisabled,
+                            isEmpty: isEmpty,
+                            showDaysInNextAndPreviousMonths: false,
+                        };
+                        // Add week number cell at the beginning of each row
+                        if (r === 0 && options.showWeekNumbers) {
+                            const weekDate = new Date(yearNumber, monthNumber, dayNumber);
+                            const weekNum = getWeekNumber(weekDate, options.weekNumbering, options.firstDay);
+                            row.push(m('td.datepicker-week-number', {
+                                title: `Week ${weekNum}`
+                            }, weekNum));
+                        }
+                        row.push(m(Day, { opts: dayConfig, options }));
+                        if (++r === 7) {
+                            data.push(m('tr.datepicker-row', row));
+                            row = [];
+                            r = 0;
+                        }
+                    }
+                    const weekdayHeaders = [];
+                    // Add week number header if enabled
+                    if (options.showWeekNumbers) {
+                        weekdayHeaders.push(m('th.datepicker-week-header', { scope: 'col', title: 'Week' }, 'Wk'));
+                    }
+                    for (let i = 0; i < 7; i++) {
+                        let day = i + options.firstDay;
+                        while (day >= 7) {
+                            day -= 7;
+                        }
+                        weekdayHeaders.push(m('th', { scope: 'col' }, [
+                            m('abbr', { title: options.i18n.weekdays[day] }, options.i18n.weekdaysAbbrev[day]),
+                        ]));
+                    }
+                    return m('.datepicker-table-wrapper', [
+                        m('table.datepicker-table', {
+                            cellpadding: '0',
+                            cellspacing: '0',
+                            role: 'grid',
+                            'aria-labelledby': randId || 'datepicker-controls',
+                            class: options.showWeekNumbers ? 'with-week-numbers' : '',
+                        }, [m('thead', [m('tr', weekdayHeaders)]), m('tbody', data)]),
+                    ]);
+                }
+            };
+        };
+        const DateDisplay = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { options } = attrs;
+                    const displayDate = isDate(state.date) ? state.date : new Date();
+                    const day = options.i18n.weekdaysShort[displayDate.getDay()];
+                    const month = options.i18n.monthsShort[displayDate.getMonth()];
+                    const date = displayDate.getDate();
+                    return m('.datepicker-date-display', [
+                        m('span.year-text', displayDate.getFullYear()),
+                        m('span.date-text', `${day}, ${month} ${date}`),
+                    ]);
+                }
+            };
+        };
+        const DateControls = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { options, randId } = attrs;
+                    const calendar = state.calendars[0];
+                    const year = calendar.year;
+                    const month = calendar.month;
+                    // Year range calculation
+                    let yearStart, yearEnd;
+                    if (Array.isArray(options.yearRange)) {
+                        yearStart = options.yearRange[0];
+                        yearEnd = options.yearRange[1];
+                    }
+                    else {
+                        yearStart = year - options.yearRange;
+                        yearEnd = year + options.yearRange;
+                    }
+                    return m('.datepicker-controls', {
+                        id: randId,
+                        role: 'heading',
+                        'aria-live': 'assertive',
+                    }, [
+                        m('button.month-prev', {
+                            type: 'button',
+                            onclick: (e) => {
+                                e.preventDefault();
+                                prevMonth();
+                            },
+                        }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                            m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
+                            m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
+                        ])),
+                        m('.selects-container', [
+                            // Month select wrapper
+                            m('.select-wrapper.select-month', [
+                                m('input.select-dropdown.dropdown-trigger', {
+                                    type: 'text',
+                                    readonly: true,
+                                    value: options.i18n.months[month],
+                                    onclick: (e) => {
+                                        e.preventDefault();
+                                        state.monthDropdownOpen = !state.monthDropdownOpen;
+                                        state.yearDropdownOpen = false; // Close year dropdown
+                                    },
+                                }),
+                                // Custom dropdown menu
+                                state.monthDropdownOpen &&
+                                    m('.dropdown-content', options.i18n.months.map((monthName, index) => m('.dropdown-item', {
+                                        key: index,
+                                        class: index === month ? 'selected' : '',
+                                        onclick: (e) => {
+                                            e.stopPropagation();
+                                            gotoMonth(index);
+                                            state.monthDropdownOpen = false;
+                                        },
+                                    }, monthName))),
+                            ]),
+                            // Year select wrapper
+                            m('.select-wrapper.select-year', [
+                                m('input.select-dropdown.dropdown-trigger', {
+                                    type: 'text',
+                                    readonly: true,
+                                    value: year.toString(),
+                                    onclick: (e) => {
+                                        e.preventDefault();
+                                        state.yearDropdownOpen = !state.yearDropdownOpen;
+                                        state.monthDropdownOpen = false; // Close month dropdown
+                                    },
+                                }),
+                                // Custom dropdown menu
+                                state.yearDropdownOpen &&
+                                    m('.dropdown-content', range(yearStart, yearEnd).map((i) => m('.dropdown-item', {
+                                        key: i,
+                                        class: i === year ? 'selected' : '',
+                                        onclick: (e) => {
+                                            e.stopPropagation();
+                                            gotoYear(i);
+                                            state.yearDropdownOpen = false;
+                                        },
+                                    }, i))),
+                            ]),
+                        ]),
+                        m('button.month-next', {
+                            type: 'button',
+                            onclick: (e) => {
+                                e.preventDefault();
+                                nextMonth();
+                            },
+                        }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                            m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
+                            m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
+                        ])),
+                    ]);
+                }
+            };
+        };
+        const gotoMonth = (month) => {
+            if (!isNaN(month)) {
+                state.calendars[0].month = month;
+                adjustCalendars();
+                // Update selected date if one exists
+                if (state.date && isDate(state.date)) {
+                    const currentDay = state.date.getDate();
+                    const newYear = state.calendars[0].year;
+                    const daysInNewMonth = getDaysInMonth(newYear, month);
+                    // Adjust day if it doesn't exist in the new month (e.g., Jan 31 -> Feb 28)
+                    const adjustedDay = Math.min(currentDay, daysInNewMonth);
+                    const newDate = new Date(newYear, month, adjustedDay);
+                    state.date = newDate;
+                    setToStartOfDay(state.date);
+                }
+            }
+        };
+        const gotoYear = (year) => {
+            if (!isNaN(year)) {
+                state.calendars[0].year = year;
+                adjustCalendars();
+                // Update selected date if one exists
+                if (state.date && isDate(state.date)) {
+                    const currentMonth = state.date.getMonth();
+                    const currentDay = state.date.getDate();
+                    const daysInNewMonth = getDaysInMonth(year, currentMonth);
+                    // Adjust day if it doesn't exist in the new year/month (e.g., leap year changes)
+                    const adjustedDay = Math.min(currentDay, daysInNewMonth);
+                    const newDate = new Date(year, currentMonth, adjustedDay);
+                    state.date = newDate;
+                    setToStartOfDay(state.date);
+                }
+            }
+        };
+        const handleDocumentClick = (e) => {
+            const target = e.target;
+            if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+                state.monthDropdownOpen = false;
+                state.yearDropdownOpen = false;
+            }
+        };
+        return {
+            oninit: (vnode) => {
+                const attrs = vnode.attrs;
+                const options = mergeOptions(attrs);
+                state = {
+                    id: uniqueId(),
+                    isOpen: false,
+                    date: null,
+                    calendars: [{ month: 0, year: 0 }],
+                    monthDropdownOpen: false,
+                    yearDropdownOpen: false,
+                    formats: {
+                        d: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0; },
+                        dd: () => {
+                            var _a;
+                            const d = ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0;
+                            return (d < 10 ? '0' : '') + d;
+                        },
+                        ddd: () => { var _a; return options.i18n.weekdaysShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                        dddd: () => { var _a; return options.i18n.weekdays[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                        m: () => { var _a; return (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1; },
+                        mm: () => {
+                            var _a;
+                            const m = (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1;
+                            return (m < 10 ? '0' : '') + m;
+                        },
+                        mmm: () => { var _a; return options.i18n.monthsShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                        mmmm: () => { var _a; return options.i18n.months[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                        yy: () => { var _a; return ('' + (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0)).slice(2); },
+                        yyyy: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0; },
+                    },
+                };
+                // Initialize date
+                let defaultDate = attrs.defaultDate;
+                if (!defaultDate && attrs.initialValue) {
+                    defaultDate = new Date(attrs.initialValue);
+                }
+                if (isDate(defaultDate)) {
+                    // Always set the date if we have initialValue or defaultDate
+                    setDate(defaultDate, true, options);
+                }
+                else {
+                    gotoDate(new Date());
+                }
+                // Add document click listener to close dropdowns
+                document.addEventListener('click', handleDocumentClick);
+            },
+            onremove: () => {
+                // Clean up event listener
+                document.removeEventListener('click', handleDocumentClick);
+            },
+            view: (vnode) => {
+                const attrs = vnode.attrs;
+                const options = mergeOptions(attrs);
+                const { id = state.id, label, dateLabel, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, className: cn1, class: cn2, } = attrs;
+                const className = cn1 || cn2 || 'col s12';
+                // Calculate display value for the input
+                let displayValue = '';
+                if (state.date) {
+                    displayValue = toString(state.date, options.format);
+                }
+                // Custom date format handling
+                if (attrs.displayFormat) {
+                    // const formatRegex = /(yyyy|mm|dd)/gi;
+                    let customDisplayValue = attrs.displayFormat;
+                    if (state.date) {
+                        customDisplayValue = customDisplayValue
+                            .replace(/yyyy/gi, state.date.getFullYear().toString())
+                            .replace(/mm/gi, (state.date.getMonth() + 1).toString().padStart(2, '0'))
+                            .replace(/dd/gi, state.date.getDate().toString().padStart(2, '0'));
+                        displayValue = customDisplayValue;
+                    }
+                }
+                return m('.input-field', {
+                    className,
+                }, [
+                    // Icon prefix
+                    iconName && m('i.material-icons.prefix', iconName),
+                    // Date input field
+                    m('input.datepicker', {
+                        id,
+                        type: 'text',
+                        value: displayValue,
+                        placeholder,
+                        disabled,
+                        readonly,
+                        required,
+                        onclick: () => {
+                            if (!disabled && !readonly) {
+                                state.isOpen = true;
+                                if (options.onOpen)
+                                    options.onOpen();
+                            }
+                        },
+                        oninput: (e) => {
+                            if (oninput) {
+                                const target = e.target;
+                                oninput(target.value);
+                            }
+                        },
+                        onchange: (e) => {
+                            if (onchange) {
+                                const target = e.target;
+                                // Try to parse the input value
+                                const date = new Date(target.value);
+                                if (isDate(date)) {
+                                    setDate(date, false, options);
+                                    onchange(toString(date, 'yyyy-mm-dd')); // Always return ISO format
+                                }
+                                else {
+                                    onchange(target.value);
+                                }
+                            }
+                        },
+                    }),
+                    // Label
+                    (label || dateLabel) &&
+                        m('label', {
+                            for: id,
+                            class: displayValue || placeholder ? 'active' : '',
+                        }, label || dateLabel),
+                    // Helper text
+                    helperText && m('span.helper-text', helperText),
+                    // Modal datepicker
+                    state.isOpen && [
+                        m('.modal.datepicker-modal.open', {
+                            id: `modal-${state.id}`,
+                            tabindex: 0,
+                            style: {
+                                zIndex: 1003,
+                                display: 'block',
+                                opacity: 1,
+                                top: '10%',
+                                transform: 'scaleX(1) scaleY(1)',
+                            },
+                        }, [
+                            m('.modal-content.datepicker-container', {
+                                onclick: (e) => {
+                                    // Close dropdowns when clicking anywhere in the modal content
+                                    const target = e.target;
+                                    if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+                                        state.monthDropdownOpen = false;
+                                        state.yearDropdownOpen = false;
+                                    }
+                                },
+                            }, [
+                                m(DateDisplay, { options }),
+                                m('.datepicker-calendar-container', [
+                                    m('.datepicker-calendar', [
+                                        m(DateControls, { options, randId: `datepicker-title-${Math.random().toString(36).slice(2)}` }),
+                                        m(Calendar, { year: state.calendars[0].year, month: state.calendars[0].month, options }),
+                                    ]),
+                                    m('.datepicker-footer', [
+                                        options.showClearBtn &&
+                                            m('button.btn-flat.datepicker-clear.waves-effect', {
+                                                type: 'button',
+                                                style: '',
+                                                onclick: () => {
+                                                    setDate(null, false, options);
+                                                    state.isOpen = false;
+                                                },
+                                            }, options.i18n.clear),
+                                        m('button.btn-flat.datepicker-cancel.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                state.isOpen = false;
+                                                if (options.onClose)
+                                                    options.onClose();
+                                            },
+                                        }, options.i18n.cancel),
+                                        m('button.btn-flat.datepicker-done.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                state.isOpen = false;
+                                                if (state.date && onchange) {
+                                                    onchange(toString(state.date, 'yyyy-mm-dd')); // Always return ISO format
+                                                }
+                                                if (options.onClose)
+                                                    options.onClose();
+                                            },
+                                        }, options.i18n.done),
+                                    ]),
+                                ]),
+                            ]),
+                        ]),
+                        // Modal overlay
+                        m('.modal-overlay', {
+                            style: {
+                                zIndex: 1002,
+                                display: 'block',
+                                opacity: 0.5,
+                            },
+                            onclick: () => {
+                                state.isOpen = false;
+                                if (options.onClose)
+                                    options.onClose();
+                            },
+                        }),
+                    ],
+                ]);
+            },
+        };
+    };
+
     /** Pure TypeScript Dropdown component - no Materialize dependencies */
     const Dropdown = () => {
         const state = {
@@ -1500,6 +2204,7 @@
                         m(MaterialIcon, {
                             name: 'caret',
                             direction: 'down',
+                            class: 'caret',
                         }),
                     ]),
                 ]);
@@ -2570,698 +3275,624 @@
         };
     };
 
-    const defaultI18n = {
-        cancel: 'Cancel',
-        clear: 'Clear',
-        done: 'Ok',
-        previousMonth: '\u2039',
-        nextMonth: '\u203a',
-        months: [
-            'January',
-            'February',
-            'March',
-            'April',
-            'May',
-            'June',
-            'July',
-            'August',
-            'September',
-            'October',
-            'November',
-            'December',
-        ],
-        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-    };
-    // Utility functions based on Materialize CSS implementation
-    const isDate = (obj) => {
-        return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
-    };
-    const isWeekend = (date) => {
-        const day = date.getDay();
-        return day === 0 || day === 6;
-    };
-    const setToStartOfDay = (date) => {
-        if (isDate(date))
-            date.setHours(0, 0, 0, 0);
-    };
-    const getDaysInMonth = (year, month) => {
-        return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
-    };
-    const isLeapYear = (year) => {
-        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
-    };
-    const compareDates = (a, b) => {
-        return a.getTime() === b.getTime();
+    const defaultOptions = {
+        dialRadius: 135,
+        outerRadius: 105,
+        innerRadius: 70,
+        tickRadius: 20,
+        duration: 350,
+        container: null,
+        defaultTime: 'now',
+        fromNow: 0,
+        showClearBtn: false,
+        i18n: {
+            cancel: 'Cancel',
+            clear: 'Clear',
+            done: 'Ok',
+        },
+        autoClose: false,
+        twelveHour: true,
+        vibrate: true,
+        onOpen: () => { },
+        onOpenStart: () => { },
+        onOpenEnd: () => { },
+        onCloseStart: () => { },
+        onCloseEnd: () => { },
+        onSelect: () => { },
     };
     /**
-     * Enhanced DatePicker component based on Materialize CSS datepicker
+     * TimePicker component based on original Materialize CSS timepicker
      */
-    const DatePicker = () => {
+    const TimePicker = () => {
         let state;
-        const mergeOptions = (attrs) => {
-            // Handle HTML attributes
-            let yearRange = 10;
-            if (attrs.yearrange) {
-                const parts = attrs.yearrange.split(',');
-                if (parts.length === 2) {
-                    yearRange = [parseInt(parts[0], 10), parseInt(parts[1], 10)];
-                }
-            }
-            else if (attrs.yearRange) {
-                yearRange = attrs.yearRange;
-            }
-            // Handle format - priority: format attribute > displayFormat > default
-            let finalFormat = 'mmm dd, yyyy';
-            if (attrs.format) {
-                finalFormat = attrs.format;
-            }
-            else if (attrs.displayFormat) {
-                finalFormat = attrs.displayFormat;
-            }
-            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
-            // Merge i18n properly
-            merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
-            return merged;
+        let options;
+        const addLeadingZero = (num) => {
+            return (num < 10 ? '0' : '') + num;
         };
-        const toString = (date, format) => {
-            if (!date || !isDate(date)) {
-                return '';
-            }
-            // Split format into tokens - match longer patterns first
-            const formatTokens = /(dddd|ddd|dd|d|mmmm|mmm|mm|m|yyyy|yy)/g;
-            let result = format;
-            // Replace all format tokens with actual values
-            result = result.replace(formatTokens, (match) => {
-                if (state.formats[match]) {
-                    return String(state.formats[match]());
-                }
-                return match;
-            });
-            return result;
+        const createSVGEl = (name) => {
+            const svgNS = 'http://www.w3.org/2000/svg';
+            return document.createElementNS(svgNS, name);
         };
-        const setDate = (date, preventOnSelect = false, options) => {
-            if (!date) {
-                state.date = null;
-                return;
-            }
-            if (typeof date === 'string') {
-                date = new Date(Date.parse(date));
-            }
-            if (!isDate(date)) {
-                return;
-            }
-            const min = options.minDate;
-            const max = options.maxDate;
-            if (isDate(min) && date < min) {
-                date = min;
+        const getPos = (e) => {
+            const touchEvent = e;
+            const mouseEvent = e;
+            if (touchEvent.targetTouches && touchEvent.targetTouches.length >= 1) {
+                return { x: touchEvent.targetTouches[0].clientX, y: touchEvent.targetTouches[0].clientY };
             }
-            else if (isDate(max) && date > max) {
-                date = max;
+            return { x: mouseEvent.clientX, y: mouseEvent.clientY };
+        };
+        const vibrate = () => {
+            if (state.vibrateTimer) {
+                clearTimeout(state.vibrateTimer);
             }
-            state.date = new Date(date.getTime());
-            setToStartOfDay(state.date);
-            gotoDate(state.date);
-            if (!preventOnSelect && options.onSelect) {
-                options.onSelect(state.date);
+            if (options.vibrate && navigator.vibrate) {
+                navigator.vibrate(10);
+                state.vibrateTimer = window.setTimeout(() => {
+                    state.vibrateTimer = undefined;
+                }, 100);
             }
         };
-        const gotoDate = (date) => {
-            if (!isDate(date)) {
+        const handleClockClickStart = (e) => {
+            e.preventDefault();
+            if (!state.plate)
                 return;
-            }
-            state.calendars = [
-                {
-                    month: date.getMonth(),
-                    year: date.getFullYear(),
-                },
-            ];
-        };
-        const nextMonth = () => {
-            state.calendars[0].month++;
-            adjustCalendars();
-        };
-        const prevMonth = () => {
-            state.calendars[0].month--;
-            adjustCalendars();
-        };
-        const adjustCalendars = () => {
-            state.calendars[0] = adjustCalendar(state.calendars[0]);
+            const clockPlateBR = state.plate.getBoundingClientRect();
+            const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+            state.x0 = offset.x + options.dialRadius;
+            state.y0 = offset.y + options.dialRadius;
+            state.moved = false;
+            const clickPos = getPos(e);
+            state.dx = clickPos.x - state.x0;
+            state.dy = clickPos.y - state.y0;
+            setHand(state.dx, state.dy, false);
+            document.addEventListener('mousemove', handleDocumentClickMove);
+            document.addEventListener('touchmove', handleDocumentClickMove);
+            document.addEventListener('mouseup', handleDocumentClickEnd);
+            document.addEventListener('touchend', handleDocumentClickEnd);
         };
-        const adjustCalendar = (calendar) => {
-            if (calendar.month < 0) {
-                calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
-                calendar.month += 12;
-            }
-            if (calendar.month > 11) {
-                calendar.year += Math.floor(Math.abs(calendar.month) / 12);
-                calendar.month -= 12;
-            }
-            return calendar;
+        const handleDocumentClickMove = (e) => {
+            e.preventDefault();
+            const clickPos = getPos(e);
+            const x = clickPos.x - state.x0;
+            const y = clickPos.y - state.y0;
+            state.moved = true;
+            setHand(x, y, false);
         };
-        const renderDay = (opts, options) => {
-            const arr = [];
-            let ariaSelected = 'false';
-            if (opts.isEmpty) {
-                {
-                    return m('td.is-empty');
+        const handleDocumentClickEnd = (e) => {
+            e.preventDefault();
+            document.removeEventListener('mouseup', handleDocumentClickEnd);
+            document.removeEventListener('touchend', handleDocumentClickEnd);
+            document.removeEventListener('mousemove', handleDocumentClickMove);
+            document.removeEventListener('touchmove', handleDocumentClickMove);
+            const clickPos = getPos(e);
+            const x = clickPos.x - state.x0;
+            const y = clickPos.y - state.y0;
+            if (state.moved && x === state.dx && y === state.dy) {
+                setHand(x, y);
+            }
+            if (state.currentView === 'hours') {
+                showView('minutes', options.duration / 2);
+            }
+            else if (options.autoClose) {
+                if (state.minutesView) {
+                    state.minutesView.classList.add('timepicker-dial-out');
                 }
+                setTimeout(() => {
+                    done();
+                }, options.duration / 2);
+            }
+            if (options.onSelect) {
+                options.onSelect(state.hours, state.minutes);
             }
-            if (opts.isDisabled) {
-                arr.push('is-disabled');
-            }
-            if (opts.isToday) {
-                arr.push('is-today');
-            }
-            if (opts.isSelected) {
-                arr.push('is-selected');
-                ariaSelected = 'true';
-            }
-            return m('td', {
-                'data-day': opts.day,
-                class: arr.join(' '),
-                'aria-selected': ariaSelected,
-            }, [
-                m('button.datepicker-day-button', {
-                    type: 'button',
-                    'data-year': opts.year,
-                    'data-month': opts.month,
-                    'data-day': opts.day,
-                    onclick: (e) => {
-                        const target = e.target;
-                        if (!opts.isDisabled) {
-                            const year = parseInt(target.getAttribute('data-year') || '0', 10);
-                            const month = parseInt(target.getAttribute('data-month') || '0', 10);
-                            const day = parseInt(target.getAttribute('data-day') || '0', 10);
-                            const selectedDate = new Date(year, month, day);
-                            setDate(selectedDate, false, options);
-                            if (options.autoClose) {
-                                state.isOpen = false;
-                            }
-                        }
-                    },
-                }, opts.day),
-            ]);
         };
-        const renderCalendar = (year, month, options, randId) => {
-            const now = new Date();
-            const days = getDaysInMonth(year, month);
-            let before = new Date(year, month, 1).getDay();
-            const data = [];
-            let row = [];
-            setToStartOfDay(now);
-            if (options.firstDay > 0) {
-                before -= options.firstDay;
-                if (before < 0) {
-                    before += 7;
+        const updateTimeFromInput = (inputValue) => {
+            let value = ((inputValue || options.defaultTime || '') + '').split(':');
+            if (options.twelveHour && value.length > 1) {
+                if (value[1].toUpperCase().indexOf('AM') > -1) {
+                    state.amOrPm = 'AM';
+                }
+                else if (value[1].toUpperCase().indexOf('PM') > -1) {
+                    state.amOrPm = 'PM';
                 }
+                value[1] = value[1].replace('AM', '').replace('PM', '').trim();
             }
-            const previousMonth = month === 0 ? 11 : month - 1;
-            const nextMonth = month === 11 ? 0 : month + 1;
-            const yearOfPreviousMonth = month === 0 ? year - 1 : year;
-            const yearOfNextMonth = month === 11 ? year + 1 : year;
-            const daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
-            let cells = days + before;
-            let after = cells;
-            while (after > 7) {
-                after -= 7;
-            }
-            cells += 7 - after;
-            for (let i = 0, r = 0; i < cells; i++) {
-                const day = new Date(year, month, 1 + (i - before));
-                const isSelected = isDate(state.date) ? compareDates(day, state.date) : false;
-                const isToday = compareDates(day, now);
-                const isEmpty = i < before || i >= days + before;
-                let dayNumber = 1 + (i - before);
-                let monthNumber = month;
-                let yearNumber = year;
-                if (isEmpty) {
-                    if (i < before) {
-                        dayNumber = daysInPreviousMonth + dayNumber;
-                        monthNumber = previousMonth;
-                        yearNumber = yearOfPreviousMonth;
-                    }
-                    else {
-                        dayNumber = dayNumber - days;
-                        monthNumber = nextMonth;
-                        yearNumber = yearOfNextMonth;
-                    }
+            if (value[0] === 'now') {
+                const now = new Date(+new Date() + options.fromNow);
+                value = [now.getHours().toString(), now.getMinutes().toString()];
+                if (options.twelveHour) {
+                    state.amOrPm = parseInt(value[0]) >= 12 ? 'PM' : 'AM';
                 }
-                const isDisabled = (options.minDate && day < options.minDate) ||
-                    (options.maxDate && day > options.maxDate) ||
-                    (options.disableWeekends && isWeekend(day)) ||
-                    (options.disableDayFn && options.disableDayFn(day));
-                const dayConfig = {
-                    day: dayNumber,
-                    month: monthNumber,
-                    year: yearNumber,
-                    isSelected: isSelected,
-                    isToday: isToday,
-                    isDisabled: isDisabled,
-                    isEmpty: isEmpty};
-                row.push(renderDay(dayConfig, options));
-                if (++r === 7) {
-                    data.push(m('tr.datepicker-row', row));
-                    row = [];
-                    r = 0;
+            }
+            let hours = +value[0] || 0;
+            let minutes = +value[1] || 0;
+            // Handle 24-hour to 12-hour conversion if needed
+            if (options.twelveHour && hours >= 12) {
+                state.amOrPm = 'PM';
+                if (hours > 12) {
+                    hours = hours - 12;
                 }
             }
-            const weekdayHeaders = [];
-            for (let i = 0; i < 7; i++) {
-                let day = i + options.firstDay;
-                while (day >= 7) {
-                    day -= 7;
+            else if (options.twelveHour && hours < 12) {
+                state.amOrPm = 'AM';
+                if (hours === 0) {
+                    hours = 12;
                 }
-                weekdayHeaders.push(m('th', { scope: 'col' }, [
-                    m('abbr', { title: options.i18n.weekdays[day] }, options.i18n.weekdaysAbbrev[day]),
-                ]));
             }
-            return m('.datepicker-table-wrapper', [
-                m('table.datepicker-table', {
-                    cellpadding: '0',
-                    cellspacing: '0',
-                    role: 'grid',
-                    'aria-labelledby': 'datepicker-controls',
-                }, [m('thead', [m('tr', weekdayHeaders)]), m('tbody', data)]),
-            ]);
-        };
-        const renderDateDisplay = (options) => {
-            const displayDate = isDate(state.date) ? state.date : new Date();
-            const day = options.i18n.weekdaysShort[displayDate.getDay()];
-            const month = options.i18n.monthsShort[displayDate.getMonth()];
-            const date = displayDate.getDate();
-            return m('.datepicker-date-display', [
-                m('span.year-text', displayDate.getFullYear()),
-                m('span.date-text', `${day}, ${month} ${date}`),
-            ]);
-        };
-        const renderControls = (options, randId) => {
-            const calendar = state.calendars[0];
-            const year = calendar.year;
-            const month = calendar.month;
-            // Month options
-            const monthOptions = [];
-            for (let i = 0; i < 12; i++) {
-                monthOptions.push(m('option', {
-                    value: i,
-                    selected: i === month ? 'selected' : undefined,
-                }, options.i18n.months[i]));
-            }
-            // Year options
-            const yearOptions = [];
-            let yearStart, yearEnd;
-            if (Array.isArray(options.yearRange)) {
-                yearStart = options.yearRange[0];
-                yearEnd = options.yearRange[1];
+            state.hours = hours;
+            state.minutes = minutes;
+            if (state.spanHours) {
+                state.spanHours.innerHTML = state.hours.toString();
             }
-            else {
-                yearStart = year - options.yearRange;
-                yearEnd = year + options.yearRange;
-            }
-            for (let i = yearStart; i <= yearEnd; i++) {
-                yearOptions.push(m('option', {
-                    value: i,
-                    selected: i === year ? 'selected' : undefined,
-                }, i));
-            }
-            return m('.datepicker-controls', {
-                id: randId,
-                role: 'heading',
-                'aria-live': 'assertive',
-            }, [
-                m('button.month-prev', {
-                    type: 'button',
-                    onclick: (e) => {
-                        e.preventDefault();
-                        prevMonth();
-                    },
-                }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
-                    m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
-                    m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
-                ])),
-                m('.selects-container', [
-                    // Month select wrapper
-                    m('.select-wrapper.select-month', [
-                        m('input.select-dropdown.dropdown-trigger', {
-                            type: 'text',
-                            readonly: true,
-                            value: options.i18n.months[month],
-                            onclick: (e) => {
-                                e.preventDefault();
-                                state.monthDropdownOpen = !state.monthDropdownOpen;
-                                state.yearDropdownOpen = false; // Close year dropdown
-                            },
-                        }),
-                        // Custom dropdown menu
-                        state.monthDropdownOpen &&
-                            m('.dropdown-content', options.i18n.months.map((monthName, index) => m('.dropdown-item', {
-                                key: index,
-                                class: index === month ? 'selected' : '',
-                                onclick: (e) => {
-                                    e.stopPropagation();
-                                    gotoMonth(index);
-                                    state.monthDropdownOpen = false;
-                                },
-                            }, monthName))),
-                    ]),
-                    // Year select wrapper
-                    m('.select-wrapper.select-year', [
-                        m('input.select-dropdown.dropdown-trigger', {
-                            type: 'text',
-                            readonly: true,
-                            value: year.toString(),
-                            onclick: (e) => {
-                                e.preventDefault();
-                                state.yearDropdownOpen = !state.yearDropdownOpen;
-                                state.monthDropdownOpen = false; // Close month dropdown
-                            },
-                        }),
-                        // Custom dropdown menu
-                        state.yearDropdownOpen &&
-                            m('.dropdown-content', range(yearStart, yearEnd).map((i) => m('.dropdown-item', {
-                                key: i,
-                                class: i === year ? 'selected' : '',
-                                onclick: (e) => {
-                                    e.stopPropagation();
-                                    gotoYear(i);
-                                    state.yearDropdownOpen = false;
-                                },
-                            }, i))),
-                    ]),
-                ]),
-                m('button.month-next', {
-                    type: 'button',
-                    onclick: (e) => {
-                        e.preventDefault();
-                        nextMonth();
-                    },
-                }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
-                    m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
-                    m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
-                ])),
-            ]);
+            if (state.spanMinutes) {
+                state.spanMinutes.innerHTML = addLeadingZero(state.minutes);
+            }
+            updateAmPmView();
         };
-        const gotoMonth = (month) => {
-            if (!isNaN(month)) {
-                state.calendars[0].month = month;
-                adjustCalendars();
+        const updateAmPmView = () => {
+            if (options.twelveHour && state.amBtn && state.pmBtn) {
+                state.amBtn.classList.toggle('text-primary', state.amOrPm === 'AM');
+                state.pmBtn.classList.toggle('text-primary', state.amOrPm === 'PM');
             }
         };
-        const gotoYear = (year) => {
-            if (!isNaN(year)) {
-                state.calendars[0].year = year;
-                adjustCalendars();
+        const showView = (view, delay) => {
+            const isHours = view === 'hours';
+            const nextView = isHours ? state.hoursView : state.minutesView;
+            const hideView = isHours ? state.minutesView : state.hoursView;
+            state.currentView = view;
+            if (state.spanHours) {
+                state.spanHours.classList.toggle('text-primary', isHours);
             }
+            if (state.spanMinutes) {
+                state.spanMinutes.classList.toggle('text-primary', !isHours);
+            }
+            if (hideView) {
+                hideView.classList.add('timepicker-dial-out');
+            }
+            if (nextView) {
+                nextView.style.visibility = 'visible';
+                nextView.classList.remove('timepicker-dial-out');
+            }
+            resetClock(delay);
+            if (state.toggleViewTimer) {
+                clearTimeout(state.toggleViewTimer);
+            }
+            state.toggleViewTimer = window.setTimeout(() => {
+                if (hideView) {
+                    hideView.style.visibility = 'hidden';
+                }
+            }, options.duration);
         };
-        const handleDocumentClick = (e) => {
-            const target = e.target;
-            if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
-                state.monthDropdownOpen = false;
-                state.yearDropdownOpen = false;
+        const resetClock = (delay) => {
+            const view = state.currentView;
+            const value = state[view];
+            const isHours = view === 'hours';
+            const unit = Math.PI / (isHours ? 6 : 30);
+            const radian = value * unit;
+            const radius = isHours && value > 0 && value < 13 ? options.innerRadius : options.outerRadius;
+            const x = Math.sin(radian) * radius;
+            const y = -Math.cos(radian) * radius;
+            if (delay && state.canvas) {
+                state.canvas.classList.add('timepicker-canvas-out');
+                setTimeout(() => {
+                    if (state.canvas) {
+                        state.canvas.classList.remove('timepicker-canvas-out');
+                    }
+                    setHand(x, y);
+                }, delay);
+            }
+            else {
+                setHand(x, y);
             }
         };
-        return {
-            oninit: (vnode) => {
-                const attrs = vnode.attrs;
-                const options = mergeOptions(attrs);
-                state = {
-                    id: uniqueId(),
-                    isOpen: false,
-                    date: null,
-                    calendars: [{ month: 0, year: 0 }],
-                    monthDropdownOpen: false,
-                    yearDropdownOpen: false,
-                    formats: {
-                        d: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0; },
-                        dd: () => {
-                            var _a;
-                            const d = ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0;
-                            return (d < 10 ? '0' : '') + d;
-                        },
-                        ddd: () => { var _a; return options.i18n.weekdaysShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
-                        dddd: () => { var _a; return options.i18n.weekdays[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
-                        m: () => { var _a; return (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1; },
-                        mm: () => {
-                            var _a;
-                            const m = (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1;
-                            return (m < 10 ? '0' : '') + m;
-                        },
-                        mmm: () => { var _a; return options.i18n.monthsShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
-                        mmmm: () => { var _a; return options.i18n.months[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
-                        yy: () => { var _a; return ('' + (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0)).slice(2); },
-                        yyyy: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0; },
-                    },
-                };
-                // Initialize date
-                let defaultDate = attrs.defaultDate;
-                if (!defaultDate && attrs.initialValue) {
-                    defaultDate = new Date(attrs.initialValue);
-                }
-                if (isDate(defaultDate)) {
-                    // Always set the date if we have initialValue or defaultDate
-                    setDate(defaultDate, true, options);
+        const setHand = (x, y, roundBy5, _dragging) => {
+            let radian = Math.atan2(x, -y);
+            const isHours = state.currentView === 'hours';
+            const unit = Math.PI / (isHours || roundBy5 ? 6 : 30);
+            const z = Math.sqrt(x * x + y * y);
+            const inner = isHours && z < (options.outerRadius + options.innerRadius) / 2;
+            let radius = inner ? options.innerRadius : options.outerRadius;
+            if (options.twelveHour) {
+                radius = options.outerRadius;
+            }
+            if (radian < 0) {
+                radian = Math.PI * 2 + radian;
+            }
+            let value = Math.round(radian / unit);
+            radian = value * unit;
+            if (options.twelveHour) {
+                if (isHours) {
+                    if (value === 0)
+                        value = 12;
                 }
                 else {
-                    gotoDate(new Date());
+                    if (roundBy5)
+                        value *= 5;
+                    if (value === 60)
+                        value = 0;
                 }
-                // Add document click listener to close dropdowns
-                document.addEventListener('click', handleDocumentClick);
-            },
-            onremove: () => {
-                // Clean up event listener
-                document.removeEventListener('click', handleDocumentClick);
-            },
-            view: (vnode) => {
-                const attrs = vnode.attrs;
-                const options = mergeOptions(attrs);
-                const { id = state.id, label, dateLabel, placeholder, disabled, required, className, style, helperText, iconName, newRow, } = attrs;
-                // Use dateLabel if label is not provided (backward compatibility)
-                const finalLabel = label || dateLabel;
-                const finalClassName = newRow ? `${className || ''} clear` : className;
-                return m('.input-field', {
-                    className: finalClassName,
-                    style,
-                }, [
-                    // Icon prefix
-                    iconName && m('i.material-icons.prefix', iconName),
-                    // Main date input
-                    m('input.datepicker', {
-                        id,
-                        type: 'text',
-                        value: toString(state.date, options.format),
-                        placeholder,
-                        disabled,
-                        required,
-                        readonly: true,
-                        format: attrs.format,
-                        yearrange: attrs.yearrange,
-                        tabindex: '0',
-                        onclick: () => {
-                            if (!disabled) {
-                                state.isOpen = true;
-                                if (options.onOpen)
-                                    options.onOpen();
-                            }
-                        },
-                    }),
-                    // Label
-                    finalLabel &&
-                        m('label', {
-                            for: id,
-                            class: state.date || placeholder ? 'active' : '',
-                        }, finalLabel),
-                    // Helper text
-                    helperText && m('span.helper-text', helperText),
-                    // Modal datepicker
-                    state.isOpen && [
-                        m('.modal.datepicker-modal.open', {
-                            id: `modal-${state.id}`,
-                            tabindex: 0,
-                            style: {
-                                zIndex: 1003,
-                                display: 'block',
-                                opacity: 1,
-                                top: '10%',
-                                transform: 'scaleX(1) scaleY(1)',
-                            },
-                        }, [
-                            m('.modal-content.datepicker-container', {
-                                onclick: (e) => {
-                                    // Close dropdowns when clicking anywhere in the modal content
-                                    const target = e.target;
-                                    if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
-                                        state.monthDropdownOpen = false;
-                                        state.yearDropdownOpen = false;
-                                    }
-                                },
-                            }, [
-                                renderDateDisplay(options),
-                                m('.datepicker-calendar-container', [
-                                    m('.datepicker-calendar', [
-                                        renderControls(options, `datepicker-title-${Math.random().toString(36).slice(2)}`),
-                                        renderCalendar(state.calendars[0].year, state.calendars[0].month, options),
-                                    ]),
-                                    m('.datepicker-footer', [
-                                        options.showClearBtn &&
-                                            m('button.btn-flat.datepicker-clear.waves-effect', {
-                                                type: 'button',
-                                                style: '',
-                                                onclick: () => {
-                                                    setDate(null, false, options);
-                                                    state.isOpen = false;
-                                                },
-                                            }, options.i18n.clear),
-                                        m('.confirmation-btns', [
-                                            m('button.btn-flat.datepicker-cancel.waves-effect', {
-                                                type: 'button',
-                                                onclick: () => {
-                                                    state.isOpen = false;
-                                                    if (options.onClose)
-                                                        options.onClose();
-                                                },
-                                            }, options.i18n.cancel),
-                                            m('button.btn-flat.datepicker-done.waves-effect', {
-                                                type: 'button',
-                                                onclick: () => {
-                                                    if (attrs.onchange && state.date) {
-                                                        attrs.onchange(state.date.toISOString().split('T')[0]);
-                                                    }
-                                                    state.isOpen = false;
-                                                    if (options.onClose)
-                                                        options.onClose();
-                                                },
-                                            }, options.i18n.done),
-                                        ]),
-                                    ]),
-                                ]),
-                            ]),
-                        ]),
-                        // Modal overlay
-                        m('.modal-overlay', {
-                            style: {
-                                zIndex: 1002,
-                                display: 'block',
-                                opacity: 0.5,
-                            },
-                            onclick: () => {
-                                state.isOpen = false;
-                                if (options.onClose)
-                                    options.onClose();
-                            },
-                        }),
-                    ],
-                ]);
-            },
-        };
-    };
-    /**
-     * Enhanced TimePicker component with i18n support and improved functionality.
-     *
-     * Usage:
-     * - Use `initialValue` to set the current/initial time value (24h format: "HH:MM")
-     * - Use `defaultTime` only if you need a fallback when the field is cleared
-     * - The component accepts and outputs 24-hour format strings ("HH:MM")
-     * - Display format (12h/24h) is controlled by the `twelveHour` property
-     */
-    const TimePicker = () => {
-        const state = {
-            id: uniqueId(),
-            isOpen: false,
-            hours: 12,
-            minutes: 0,
-            ampm: 'AM',
-            use12Hour: false,
-            time: ''};
-        const parseTime = (timeString) => {
-            if (!timeString)
-                return { hours: 12, minutes: 0, ampm: 'AM' };
-            const [time, ampm] = timeString.split(' ');
-            const [hoursStr, minutesStr] = time.split(':');
-            let hours = parseInt(hoursStr, 10) || 0;
-            const minutes = parseInt(minutesStr, 10) || 0;
-            if (ampm) {
-                // 12-hour format
-                if (ampm.toUpperCase() === 'PM' && hours !== 12)
-                    hours += 12;
-                if (ampm.toUpperCase() === 'AM' && hours === 12)
-                    hours = 0;
-                return { hours, minutes, ampm: ampm.toUpperCase() };
             }
             else {
-                // 24-hour format
-                const displayAmpm = hours >= 12 ? 'PM' : 'AM';
-                return { hours, minutes, ampm: displayAmpm };
+                if (isHours) {
+                    if (value === 12)
+                        value = 0;
+                    value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+                }
+                else {
+                    if (roundBy5)
+                        value *= 5;
+                    if (value === 60)
+                        value = 0;
+                }
+            }
+            if (state[state.currentView] !== value) {
+                vibrate();
             }
+            state[state.currentView] = value;
+            if (isHours && state.spanHours) {
+                state.spanHours.innerHTML = value.toString();
+            }
+            else if (!isHours && state.spanMinutes) {
+                state.spanMinutes.innerHTML = addLeadingZero(value);
+            }
+            // Set clock hand position
+            if (state.hand && state.bg) {
+                const cx1 = Math.sin(radian) * (radius - options.tickRadius);
+                const cy1 = -Math.cos(radian) * (radius - options.tickRadius);
+                const cx2 = Math.sin(radian) * radius;
+                const cy2 = -Math.cos(radian) * radius;
+                state.hand.setAttribute('x2', cx1.toString());
+                state.hand.setAttribute('y2', cy1.toString());
+                state.bg.setAttribute('cx', cx2.toString());
+                state.bg.setAttribute('cy', cy2.toString());
+            }
+        };
+        const buildSVGClock = () => {
+            if (!state.canvas)
+                return;
+            const dialRadius = options.dialRadius;
+            const tickRadius = options.tickRadius;
+            const diameter = dialRadius * 2;
+            const svg = createSVGEl('svg');
+            svg.setAttribute('class', 'timepicker-svg');
+            svg.setAttribute('width', diameter.toString());
+            svg.setAttribute('height', diameter.toString());
+            const g = createSVGEl('g');
+            g.setAttribute('transform', `translate(${dialRadius},${dialRadius})`);
+            const bearing = createSVGEl('circle');
+            bearing.setAttribute('class', 'timepicker-canvas-bearing');
+            bearing.setAttribute('cx', '0');
+            bearing.setAttribute('cy', '0');
+            bearing.setAttribute('r', '4');
+            const hand = createSVGEl('line');
+            hand.setAttribute('x1', '0');
+            hand.setAttribute('y1', '0');
+            const bg = createSVGEl('circle');
+            bg.setAttribute('class', 'timepicker-canvas-bg');
+            bg.setAttribute('r', tickRadius.toString());
+            g.appendChild(hand);
+            g.appendChild(bg);
+            g.appendChild(bearing);
+            svg.appendChild(g);
+            state.canvas.appendChild(svg);
+            state.hand = hand;
+            state.bg = bg;
+            state.bearing = bearing;
+            state.g = g;
         };
-        const formatTime = (hours, minutes, use12Hour) => {
-            if (use12Hour) {
-                const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
-                const ampm = hours >= 12 ? 'PM' : 'AM';
-                return `${displayHours}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+        const buildHoursView = () => {
+            if (!state.hoursView)
+                return;
+            if (options.twelveHour) {
+                for (let i = 1; i < 13; i++) {
+                    const tick = document.createElement('div');
+                    tick.className = 'timepicker-tick';
+                    const radian = (i / 6) * Math.PI;
+                    const radius = options.outerRadius;
+                    tick.style.left = options.dialRadius + Math.sin(radian) * radius - options.tickRadius + 'px';
+                    tick.style.top = options.dialRadius - Math.cos(radian) * radius - options.tickRadius + 'px';
+                    tick.innerHTML = i === 0 ? '00' : i.toString();
+                    state.hoursView.appendChild(tick);
+                }
             }
             else {
-                return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+                for (let i = 0; i < 24; i++) {
+                    const tick = document.createElement('div');
+                    tick.className = 'timepicker-tick';
+                    const radian = (i / 6) * Math.PI;
+                    const inner = i > 0 && i < 13;
+                    const radius = inner ? options.innerRadius : options.outerRadius;
+                    tick.style.left = options.dialRadius + Math.sin(radian) * radius - options.tickRadius + 'px';
+                    tick.style.top = options.dialRadius - Math.cos(radian) * radius - options.tickRadius + 'px';
+                    tick.innerHTML = i === 0 ? '00' : i.toString();
+                    state.hoursView.appendChild(tick);
+                }
             }
         };
-        const setTime = (timeString, attrs) => {
-            const parsed = parseTime(timeString);
-            state.hours = parsed.hours;
-            state.minutes = parsed.minutes;
-            state.ampm = parsed.ampm;
-            state.time = timeString;
-            if (attrs.onchange) {
-                // Always output 24-hour format for consistency
-                const output24h = `${state.hours.toString().padStart(2, '0')}:${state.minutes.toString().padStart(2, '0')}`;
-                attrs.onchange(output24h);
-            }
-            if (attrs.oninput) {
-                attrs.oninput(timeString);
+        const buildMinutesView = () => {
+            if (!state.minutesView)
+                return;
+            for (let i = 0; i < 60; i += 5) {
+                const tick = document.createElement('div');
+                tick.className = 'timepicker-tick';
+                const radian = (i / 30) * Math.PI;
+                tick.style.left = options.dialRadius + Math.sin(radian) * options.outerRadius - options.tickRadius + 'px';
+                tick.style.top = options.dialRadius - Math.cos(radian) * options.outerRadius - options.tickRadius + 'px';
+                tick.innerHTML = addLeadingZero(i);
+                state.minutesView.appendChild(tick);
             }
-            if (attrs.onSelect) {
-                attrs.onSelect(state.hours, state.minutes);
+        };
+        const handleAmPmClick = (ampm) => {
+            state.amOrPm = ampm;
+            updateAmPmView();
+        };
+        const open = (inputValue) => {
+            if (state.isOpen)
+                return;
+            state.isOpen = true;
+            updateTimeFromInput(inputValue);
+            showView('hours');
+            if (options.onOpen)
+                options.onOpen();
+            if (options.onOpenStart)
+                options.onOpenStart();
+            if (options.onOpenEnd)
+                options.onOpenEnd();
+        };
+        const close = () => {
+            if (!state.isOpen)
+                return;
+            state.isOpen = false;
+            if (options.onCloseStart)
+                options.onCloseStart();
+            if (options.onCloseEnd)
+                options.onCloseEnd();
+        };
+        const done = (clearValue) => {
+            // const last = ''; // We'll get this from the actual input
+            let value = clearValue ? '' : addLeadingZero(state.hours) + ':' + addLeadingZero(state.minutes);
+            if (!clearValue && options.twelveHour) {
+                value = `${value} ${state.amOrPm}`;
             }
+            close();
+            return value;
+        };
+        const clear = () => {
+            return done(true);
+        };
+        const TimepickerModal = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { showClearBtn, clearLabel, closeLabel, doneLabel } = attrs;
+                    return [
+                        m('.modal-content.timepicker-container', [
+                            m('.timepicker-digital-display', [
+                                m('.timepicker-text-container', [
+                                    m('.timepicker-display-column', [
+                                        m('span.timepicker-span-hours', {
+                                            class: state.currentView === 'hours' ? 'text-primary' : '',
+                                            onclick: () => showView('hours'),
+                                            oncreate: (vnode) => {
+                                                state.spanHours = vnode.dom;
+                                            },
+                                        }, state.hours.toString()),
+                                        ':',
+                                        m('span.timepicker-span-minutes', {
+                                            class: state.currentView === 'minutes' ? 'text-primary' : '',
+                                            onclick: () => showView('minutes'),
+                                            oncreate: (vnode) => {
+                                                state.spanMinutes = vnode.dom;
+                                            },
+                                        }, addLeadingZero(state.minutes)),
+                                    ]),
+                                    options.twelveHour &&
+                                        m('.timepicker-display-column.timepicker-display-am-pm', [
+                                            m('.timepicker-span-am-pm', {
+                                                oncreate: (vnode) => {
+                                                    state.spanAmPm = vnode.dom;
+                                                },
+                                            }, [
+                                                m('.am-btn', {
+                                                    class: state.amOrPm === 'AM' ? 'text-primary' : '',
+                                                    onclick: () => handleAmPmClick('AM'),
+                                                    oncreate: (vnode) => {
+                                                        state.amBtn = vnode.dom;
+                                                    },
+                                                }, 'AM'),
+                                                m('.pm-btn', {
+                                                    class: state.amOrPm === 'PM' ? 'text-primary' : '',
+                                                    onclick: () => handleAmPmClick('PM'),
+                                                    oncreate: (vnode) => {
+                                                        state.pmBtn = vnode.dom;
+                                                    },
+                                                }, 'PM'),
+                                            ]),
+                                        ]),
+                                ]),
+                            ]),
+                            m('.timepicker-analog-display', [
+                                m('.timepicker-plate', {
+                                    oncreate: (vnode) => {
+                                        state.plate = vnode.dom;
+                                        state.plate.addEventListener('mousedown', handleClockClickStart);
+                                        state.plate.addEventListener('touchstart', handleClockClickStart);
+                                    },
+                                    onremove: () => {
+                                        if (state.plate) {
+                                            state.plate.removeEventListener('mousedown', handleClockClickStart);
+                                            state.plate.removeEventListener('touchstart', handleClockClickStart);
+                                        }
+                                    },
+                                }, [
+                                    m('.timepicker-canvas', {
+                                        oncreate: (vnode) => {
+                                            state.canvas = vnode.dom;
+                                            buildSVGClock();
+                                            // Position the hand after SVG is built
+                                            setTimeout(() => resetClock(), 10);
+                                        },
+                                    }),
+                                    m('.timepicker-dial.timepicker-hours', {
+                                        oncreate: (vnode) => {
+                                            state.hoursView = vnode.dom;
+                                            buildHoursView();
+                                        },
+                                    }),
+                                    m('.timepicker-dial.timepicker-minutes.timepicker-dial-out', {
+                                        oncreate: (vnode) => {
+                                            state.minutesView = vnode.dom;
+                                            buildMinutesView();
+                                        },
+                                    }),
+                                ]),
+                                m('.timepicker-footer', {
+                                    oncreate: (vnode) => {
+                                        state.footer = vnode.dom;
+                                    },
+                                }, [
+                                    m('button.btn-flat.timepicker-clear.waves-effect', {
+                                        type: 'button',
+                                        tabindex: options.twelveHour ? '3' : '1',
+                                        style: showClearBtn ? '' : 'visibility: hidden;',
+                                        onclick: () => clear(),
+                                    }, clearLabel),
+                                    m('.confirmation-btns', [
+                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                            type: 'button',
+                                            tabindex: options.twelveHour ? '3' : '1',
+                                            onclick: () => close(),
+                                        }, closeLabel),
+                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                            type: 'button',
+                                            tabindex: options.twelveHour ? '3' : '1',
+                                            onclick: () => done(),
+                                        }, doneLabel),
+                                    ]),
+                                ]),
+                            ]),
+                        ]),
+                    ];
+                },
+            };
         };
         return {
             oninit: (vnode) => {
-                const { initialValue, defaultTime, twelveHour = false } = vnode.attrs;
-                state.use12Hour = twelveHour;
-                const timeValue = initialValue || defaultTime || '';
-                if (timeValue) {
-                    const parsed = parseTime(timeValue);
-                    state.hours = parsed.hours;
-                    state.minutes = parsed.minutes;
-                    state.ampm = parsed.ampm;
-                    state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+                const attrs = vnode.attrs;
+                options = Object.assign(Object.assign({}, defaultOptions), attrs);
+                state = {
+                    id: uniqueId(),
+                    isOpen: false,
+                    hours: 12,
+                    minutes: 0,
+                    amOrPm: 'AM',
+                    currentView: 'hours',
+                    moved: false,
+                    x0: 0,
+                    y0: 0,
+                    dx: 0,
+                    dy: 0,
+                };
+                // Handle initial value after options are set
+                if (attrs.initialValue) {
+                    updateTimeFromInput(attrs.initialValue);
                 }
             },
-            view: (vnode) => {
-                const attrs = vnode.attrs;
-                const { id = state.id, label = 'Time', placeholder = 'Select time', disabled, readonly, required, className, style, helperText, iconName = 'access_time', newRow, twelveHour = false, timeLabel = 'Time', nowLabel = 'Now', clearLabel = 'Clear', closeLabel = 'Close', amLabel = 'AM', pmLabel = 'PM', showClearBtn = false, showNowBtn = false, useModal = true, } = attrs;
-                state.use12Hour = twelveHour;
-                const finalClassName = newRow ? `${className || ''} clear` : className;
-                const displayValue = state.time ? formatTime(state.hours, state.minutes, state.use12Hour) : '';
-                return m('.input-field', {
-                    className: finalClassName,
-                    style,
-                }, [
+            onremove: () => {
+                // Cleanup
+                if (state.toggleViewTimer) {
+                    clearTimeout(state.toggleViewTimer);
+                }
+                if (state.vibrateTimer) {
+                    clearTimeout(state.vibrateTimer);
+                }
+                document.removeEventListener('mousemove', handleDocumentClickMove);
+                document.removeEventListener('touchmove', handleDocumentClickMove);
+                document.removeEventListener('mouseup', handleDocumentClickEnd);
+                document.removeEventListener('touchend', handleDocumentClickEnd);
+            },
+            view: ({ attrs }) => {
+                const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel', twelveHour, className: cn1, class: cn2, } = attrs;
+                const className = cn1 || cn2 || 'col s12';
+                // Format time value for display
+                const formatTime = (hours, minutes, use12Hour) => {
+                    if (use12Hour) {
+                        const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+                        const ampm = hours >= 12 ? 'PM' : 'AM';
+                        return `${displayHours}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+                    }
+                    else {
+                        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+                    }
+                };
+                const setTime = (timeValue) => {
+                    if (onchange) {
+                        onchange(timeValue);
+                    }
+                };
+                // Calculate display hours based on format
+                let hoursForDisplay = state.hours;
+                if (twelveHour) {
+                    // For 12-hour display format, use the original 24-hour value so formatTime can properly determine AM/PM
+                    if (options.twelveHour) {
+                        // Convert from internal 12-hour back to 24-hour for proper AM/PM calculation
+                        if (state.amOrPm === 'PM' && state.hours !== 12) {
+                            hoursForDisplay = state.hours + 12;
+                        }
+                        else if (state.amOrPm === 'AM' && state.hours === 12) {
+                            hoursForDisplay = 0;
+                        }
+                    }
+                }
+                else {
+                    // For 24-hour display format
+                    if (options.twelveHour) {
+                        // Convert from internal 12-hour to 24-hour for display
+                        if (state.amOrPm === 'PM' && state.hours !== 12) {
+                            hoursForDisplay = state.hours + 12;
+                        }
+                        else if (state.amOrPm === 'AM' && state.hours === 12) {
+                            hoursForDisplay = 0;
+                        }
+                    }
+                }
+                const displayValue = state.hours !== undefined && state.minutes !== undefined
+                    ? formatTime(hoursForDisplay, state.minutes, twelveHour || false)
+                    : '';
+                return m('.input-field', { className }, [
                     // Icon prefix
                     iconName && m('i.material-icons.prefix', iconName),
-                    // Time input field
+                    // Time input field - use HTML5 time input for inline mode
                     m('input.timepicker', {
                         id,
-                        type: 'text',
-                        value: displayValue,
-                        placeholder,
+                        type: useModal ? 'text' : 'time',
+                        value: useModal
+                            ? displayValue
+                            : state.hours !== undefined && state.minutes !== undefined
+                                ? `${state.hours.toString().padStart(2, '0')}:${state.minutes.toString().padStart(2, '0')}`
+                                : '',
+                        placeholder: useModal ? placeholder : undefined,
                         disabled,
                         readonly,
                         required,
                         onclick: () => {
                             if (!disabled && !readonly && useModal) {
-                                state.isOpen = true;
-                                if (attrs.onOpen)
-                                    attrs.onOpen();
+                                open(displayValue);
+                            }
+                        },
+                        onchange: (e) => {
+                            if (!useModal) {
+                                // For inline mode, handle HTML5 time input changes directly
+                                const target = e.target;
+                                const timeValue = target.value; // Already in HH:MM format
+                                const [hours, minutes] = timeValue.split(':').map(Number);
+                                state.hours = hours;
+                                state.minutes = minutes;
+                                setTime(timeValue);
+                            }
+                        },
+                        oninput: (e) => {
+                            if (!useModal && oninput) {
+                                const target = e.target;
+                                oninput(target.value);
                             }
                         },
                     }),
@@ -3273,150 +3904,161 @@
                         }, label),
                     // Helper text
                     helperText && m('span.helper-text', helperText),
-                    // Time picker modal (simplified version)
+                    // Modal timepicker
                     useModal &&
-                        state.isOpen &&
-                        m('.timepicker-modal', {
+                        state.isOpen && [
+                        // Modal overlay
+                        m('.modal-overlay', {
                             style: {
-                                position: 'fixed',
-                                top: '50%',
-                                left: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                backgroundColor: 'white',
-                                padding: '20px',
-                                borderRadius: '4px',
-                                boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
-                                zIndex: 1000,
+                                zIndex: 1002,
+                                display: 'block',
+                                opacity: 0.5,
                             },
-                        }, [
-                            m('h4', timeLabel),
-                            m('.time-inputs', {
-                                style: { display: 'flex', alignItems: 'center', gap: '10px', margin: '20px 0' },
-                            }, [
-                                // Hours input
-                                m('input', {
-                                    type: 'number',
-                                    min: state.use12Hour ? 1 : 0,
-                                    max: state.use12Hour ? 12 : 23,
-                                    value: state.use12Hour
-                                        ? state.hours === 0
-                                            ? 12
-                                            : state.hours > 12
-                                                ? state.hours - 12
-                                                : state.hours
-                                        : state.hours,
-                                    style: { width: '60px', textAlign: 'center', padding: '8px' },
-                                    onchange: (e) => {
-                                        const target = e.target;
-                                        let hours = parseInt(target.value) || 0;
-                                        if (state.use12Hour) {
-                                            if (state.ampm === 'PM' && hours !== 12)
-                                                hours += 12;
-                                            if (state.ampm === 'AM' && hours === 12)
-                                                hours = 0;
-                                        }
-                                        state.hours = hours;
-                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                    },
-                                }),
-                                m('span', ':'),
-                                // Minutes input
-                                m('input', {
-                                    type: 'number',
-                                    min: 0,
-                                    max: 59,
-                                    value: state.minutes,
-                                    style: { width: '60px', textAlign: 'center', padding: '8px' },
-                                    onchange: (e) => {
-                                        const target = e.target;
-                                        state.minutes = parseInt(target.value) || 0;
-                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                    },
-                                }),
-                                // AM/PM toggle for 12-hour format
-                                state.use12Hour &&
-                                    m('select', {
-                                        value: state.ampm,
-                                        style: { padding: '8px' },
-                                        onchange: (e) => {
-                                            const target = e.target;
-                                            const oldAmpm = state.ampm;
-                                            state.ampm = target.value;
-                                            // Adjust hours when switching AM/PM
-                                            if (oldAmpm !== state.ampm) {
-                                                if (state.ampm === 'PM' && state.hours < 12) {
-                                                    state.hours += 12;
-                                                }
-                                                else if (state.ampm === 'AM' && state.hours >= 12) {
-                                                    state.hours -= 12;
-                                                }
-                                            }
-                                            state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                        },
-                                    }, [m('option', { value: 'AM' }, amLabel), m('option', { value: 'PM' }, pmLabel)]),
-                            ]),
-                            // Action buttons
-                            m('.timepicker-actions', {
-                                style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' },
-                            }, [
-                                showClearBtn &&
-                                    m('button.btn-flat', {
-                                        onclick: () => {
-                                            setTime('', attrs);
-                                            state.isOpen = false;
-                                        },
-                                    }, clearLabel),
-                                showNowBtn &&
-                                    m('button.btn-flat', {
-                                        onclick: () => {
-                                            const now = new Date();
-                                            state.hours = now.getHours();
-                                            state.minutes = now.getMinutes();
-                                            state.ampm = state.hours >= 12 ? 'PM' : 'AM';
-                                            state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                        },
-                                    }, nowLabel),
-                                m('button.btn-flat', {
-                                    onclick: () => {
-                                        state.isOpen = false;
-                                        if (attrs.onClose)
-                                            attrs.onClose();
-                                    },
-                                }, closeLabel),
-                                m('button.btn-flat', {
-                                    onclick: () => {
-                                        setTime(state.time, attrs);
-                                        state.isOpen = false;
-                                        if (attrs.onClose)
-                                            attrs.onClose();
-                                    },
-                                }, 'OK'),
-                            ]),
-                        ]),
-                    // Modal backdrop
-                    useModal &&
-                        state.isOpen &&
-                        m('.modal-backdrop', {
+                            onclick: () => close(),
+                        }),
+                        // Modal content
+                        m('.modal.timepicker-modal.open', {
                             style: {
-                                position: 'fixed',
-                                top: 0,
-                                left: 0,
-                                width: '100%',
-                                height: '100%',
-                                backgroundColor: 'rgba(0,0,0,0.5)',
-                                zIndex: 999,
-                            },
-                            onclick: () => {
-                                state.isOpen = false;
-                                if (attrs.onClose)
-                                    attrs.onClose();
+                                zIndex: 1003,
+                                display: 'block',
+                                opacity: 1,
+                                top: '10%',
+                                transform: 'scaleX(1) scaleY(1)',
                             },
-                        }),
+                        }, m(TimepickerModal, { showClearBtn, clearLabel, closeLabel, doneLabel: 'OK' })),
+                    ],
                 ]);
             },
         };
     };
 
+    class Pushpin {
+        constructor(el, options = {}) {
+            this.el = el;
+            this.options = Object.assign(Object.assign({}, Pushpin.defaults), options);
+            this.state = {
+                originalOffset: this.el.getBoundingClientRect().top + window.pageYOffset,
+            };
+            this.el.M_Pushpin = this;
+            this._setupEventHandlers();
+            this._updateElementPosition();
+        }
+        static getInstance(el) {
+            return el.M_Pushpin;
+        }
+        destroy() {
+            this.el.style.position = '';
+            this.el.style.top = '';
+            this.el.style.left = '';
+            this._removeEventHandlers();
+            this.el.M_Pushpin = undefined;
+        }
+        _setupEventHandlers() {
+            this._updateElementPositionBound = this._updateElementPosition.bind(this);
+            window.addEventListener('scroll', this._updateElementPositionBound);
+            window.addEventListener('resize', this._updateElementPositionBound);
+        }
+        _removeEventHandlers() {
+            window.removeEventListener('scroll', this._updateElementPositionBound);
+            window.removeEventListener('resize', this._updateElementPositionBound);
+        }
+        _updateElementPosition() {
+            const scrolled = window.pageYOffset;
+            const elementTop = this.state.originalOffset - this.options.offset;
+            // const elementBottom = elementTop + this.el.offsetHeight;
+            // Check if element should be pinned
+            if (scrolled > elementTop) {
+                // Check if element is past bottom
+                if (this.options.bottom !== Infinity && scrolled > this.options.bottom) {
+                    this._removePinClasses();
+                    this.el.classList.add('pin-bottom');
+                    this.el.style.position = 'absolute';
+                    this.el.style.top = this.options.bottom - this.el.offsetHeight + 'px';
+                    this.el.style.left = '';
+                    if (this.options.onPositionChange) {
+                        this.options.onPositionChange('pin-bottom');
+                    }
+                }
+                else {
+                    // Pin element
+                    this._removePinClasses();
+                    this.el.classList.add('pinned');
+                    this.el.style.position = 'fixed';
+                    this.el.style.top = this.options.top + 'px';
+                    this.el.style.left = this.el.getBoundingClientRect().left + 'px';
+                    if (this.options.onPositionChange) {
+                        this.options.onPositionChange('pinned');
+                    }
+                }
+            }
+            else {
+                // Unpin element
+                this._removePinClasses();
+                this.el.classList.add('pin-top');
+                this.el.style.position = '';
+                this.el.style.top = '';
+                this.el.style.left = '';
+                if (this.options.onPositionChange) {
+                    this.options.onPositionChange('pin-top');
+                }
+            }
+        }
+        _removePinClasses() {
+            this.el.classList.remove('pin-top');
+            this.el.classList.remove('pinned');
+            this.el.classList.remove('pin-bottom');
+        }
+        _updatePosition() {
+            // Recalculate original offset in case element moved
+            this.state.originalOffset = this.el.getBoundingClientRect().top + window.pageYOffset;
+            this._updateElementPosition();
+        }
+    }
+    Pushpin.defaults = {
+        top: 0,
+        bottom: Infinity,
+        offset: 0,
+        onPositionChange: undefined,
+    };
+    const PushpinComponent = () => {
+        let pushpinInstance = null;
+        return {
+            oncreate: ({ attrs }) => {
+                if (attrs.targetSelector) {
+                    const targetEl = document.querySelector(attrs.targetSelector);
+                    if (targetEl) {
+                        pushpinInstance = new Pushpin(targetEl, attrs);
+                    }
+                }
+            },
+            onupdate: ({ attrs }) => {
+                if (pushpinInstance) {
+                    // Update options and recalculate position
+                    pushpinInstance.options = Object.assign(Object.assign({}, pushpinInstance.options), attrs);
+                    pushpinInstance._updatePosition();
+                }
+            },
+            onremove: () => {
+                if (pushpinInstance) {
+                    pushpinInstance.destroy();
+                    pushpinInstance = null;
+                }
+            },
+            view: () => null, // This component doesn't render anything itself
+        };
+    };
+    // Helper function to initialize pushpins on elements
+    const initPushpins = (selector = '.pushpin', options = {}) => {
+        const elements = document.querySelectorAll(selector);
+        const pushpins = [];
+        elements.forEach((el) => {
+            if (!el.M_Pushpin) {
+                pushpins.push(new Pushpin(el, options));
+            }
+        });
+        return pushpins;
+    };
+
     const RadioButton = () => ({
         view: ({ attrs: { id, groupId, label, onchange, className = 'col s12', checked, disabled, inputId } }) => {
             const radioId = inputId || `${groupId}-${id}`;
@@ -3699,6 +4341,7 @@
                         m(MaterialIcon, {
                             name: 'caret',
                             direction: 'down',
+                            class: 'caret',
                         }),
                     ]),
                     // Label
@@ -4106,6 +4749,7 @@
                         m(MaterialIcon, {
                             name: 'caret',
                             direction: state.isOpen ? 'up' : 'down',
+                            class: 'caret',
                             style: { marginLeft: 'auto', cursor: 'pointer' },
                         }),
                     ]),
@@ -4212,6 +4856,493 @@
         };
     };
 
+    class Toast {
+        constructor(options = {}) {
+            this.options = Object.assign(Object.assign({}, Toast.defaults), options);
+            this.state = {
+                panning: false,
+                timeRemaining: this.options.displayLength,
+                startingXPos: 0,
+                xPos: 0,
+                velocityX: 0,
+                time: 0,
+                deltaX: 0,
+                wasSwiped: false,
+            };
+            if (Toast._toasts.length === 0) {
+                Toast._createContainer();
+            }
+            // Create new toast
+            Toast._toasts.push(this);
+            this.el = this._createToast();
+            this._animateIn();
+            this._setTimer();
+        }
+        static getInstance(el) {
+            return el.M_Toast;
+        }
+        static _createContainer() {
+            const container = document.createElement('div');
+            container.setAttribute('id', 'toast-container');
+            // Add event handlers
+            container.addEventListener('touchstart', Toast._onDragStart);
+            container.addEventListener('touchmove', Toast._onDragMove);
+            container.addEventListener('touchend', Toast._onDragEnd);
+            container.addEventListener('mousedown', Toast._onDragStart);
+            document.addEventListener('mousemove', Toast._onDragMove);
+            document.addEventListener('mouseup', Toast._onDragEnd);
+            document.body.appendChild(container);
+            Toast._container = container;
+        }
+        static _removeContainer() {
+            document.removeEventListener('mousemove', Toast._onDragMove);
+            document.removeEventListener('mouseup', Toast._onDragEnd);
+            if (Toast._container) {
+                Toast._container.remove();
+                Toast._container = null;
+            }
+        }
+        static _xPos(e) {
+            const touchEvent = e;
+            const mouseEvent = e;
+            if (touchEvent.targetTouches && touchEvent.targetTouches.length >= 1) {
+                return touchEvent.targetTouches[0].clientX;
+            }
+            return mouseEvent.clientX;
+        }
+        static dismissAll() {
+            Toast._toasts.forEach((toast) => toast.dismiss());
+        }
+        _createToast() {
+            const toast = document.createElement('div');
+            toast.classList.add('toast');
+            // Add custom classes
+            if (this.options.classes) {
+                toast.classList.add(...this.options.classes.split(' '));
+            }
+            // Set content
+            const message = this.options.html;
+            if (typeof message === 'object' && message && 'nodeType' in message) {
+                toast.appendChild(message);
+            }
+            else {
+                toast.innerHTML = message;
+            }
+            // Store reference
+            toast.M_Toast = this;
+            // Append to container
+            Toast._container.appendChild(toast);
+            return toast;
+        }
+        _animateIn() {
+            // Simple CSS animation since we don't have anime.js
+            this.el.style.cssText = `
+      transform: translateY(35px);
+      opacity: 0;
+      transition: transform ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
+                  opacity ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    `;
+            // Trigger animation
+            setTimeout(() => {
+                this.el.style.transform = 'translateY(0)';
+                this.el.style.opacity = '1';
+            }, 10);
+        }
+        _setTimer() {
+            if (this.state.timeRemaining !== Infinity) {
+                this.state.counterInterval = window.setInterval(() => {
+                    if (!this.state.panning) {
+                        this.state.timeRemaining -= 20;
+                    }
+                    if (this.state.timeRemaining <= 0) {
+                        this.dismiss();
+                    }
+                }, 20);
+            }
+        }
+        dismiss() {
+            if (this.state.counterInterval) {
+                window.clearInterval(this.state.counterInterval);
+            }
+            const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+            if (this.state.wasSwiped) {
+                this.el.style.transition = 'transform .05s, opacity .05s';
+                this.el.style.transform = `translateX(${activationDistance}px)`;
+                this.el.style.opacity = '0';
+            }
+            // Animate out
+            this.el.style.cssText += `
+      transition: opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                  margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1);
+      opacity: 0;
+      margin-top: -40px;
+    `;
+            setTimeout(() => {
+                // Call completion callback
+                if (this.options.completeCallback) {
+                    this.options.completeCallback();
+                }
+                // Remove toast from DOM
+                this.el.remove();
+                // Remove from toasts array
+                const index = Toast._toasts.indexOf(this);
+                if (index > -1) {
+                    Toast._toasts.splice(index, 1);
+                }
+                // Remove container if no more toasts
+                if (Toast._toasts.length === 0) {
+                    Toast._removeContainer();
+                }
+            }, this.options.outDuration);
+        }
+    }
+    Toast._toasts = [];
+    Toast._container = null;
+    Toast._draggedToast = null;
+    Toast.defaults = {
+        html: '',
+        displayLength: 4000,
+        inDuration: 300,
+        outDuration: 375,
+        classes: '',
+        completeCallback: undefined,
+        activationPercent: 0.8,
+    };
+    Toast._onDragStart = (e) => {
+        const target = e.target;
+        const toastEl = target.closest('.toast');
+        if (toastEl) {
+            const toast = toastEl.M_Toast;
+            if (toast) {
+                toast.state.panning = true;
+                Toast._draggedToast = toast;
+                toast.el.classList.add('panning');
+                toast.el.style.transition = '';
+                toast.state.startingXPos = Toast._xPos(e);
+                toast.state.time = Date.now();
+                toast.state.xPos = Toast._xPos(e);
+            }
+        }
+    };
+    Toast._onDragMove = (e) => {
+        if (Toast._draggedToast) {
+            e.preventDefault();
+            const toast = Toast._draggedToast;
+            toast.state.deltaX = Math.abs(toast.state.xPos - Toast._xPos(e));
+            toast.state.xPos = Toast._xPos(e);
+            toast.state.velocityX = toast.state.deltaX / (Date.now() - toast.state.time);
+            toast.state.time = Date.now();
+            const totalDeltaX = toast.state.xPos - toast.state.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+            toast.el.style.opacity = String(1 - Math.abs(totalDeltaX / activationDistance));
+        }
+    };
+    Toast._onDragEnd = () => {
+        if (Toast._draggedToast) {
+            const toast = Toast._draggedToast;
+            toast.state.panning = false;
+            toast.el.classList.remove('panning');
+            const totalDeltaX = toast.state.xPos - toast.state.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.state.velocityX > 1;
+            if (shouldBeDismissed) {
+                toast.state.wasSwiped = true;
+                toast.dismiss();
+            }
+            else {
+                toast.el.style.transition = 'transform .2s, opacity .2s';
+                toast.el.style.transform = '';
+                toast.el.style.opacity = '';
+            }
+            Toast._draggedToast = null;
+        }
+    };
+    // Factory function for creating toasts
+    const toast = (options) => {
+        return new Toast(options);
+    };
+    const ToastComponent = () => {
+        let toastInstance = null;
+        return {
+            view: ({ attrs }) => {
+                if (attrs.show && !toastInstance) {
+                    toastInstance = new Toast(attrs);
+                }
+                else if (!attrs.show && toastInstance) {
+                    toastInstance.dismiss();
+                    toastInstance = null;
+                }
+                return null; // This component doesn't render anything itself
+            },
+            onremove: () => {
+                if (toastInstance) {
+                    toastInstance.dismiss();
+                    toastInstance = null;
+                }
+            },
+        };
+    };
+
+    class Tooltip {
+        constructor(el, options = {}) {
+            this.el = el;
+            this.options = Object.assign(Object.assign({}, Tooltip.defaults), options);
+            this.state = {
+                isOpen: false,
+                isHovered: false,
+                isFocused: false,
+                xMovement: 0,
+                yMovement: 0,
+            };
+            this.el.M_Tooltip = this;
+            this._appendTooltipEl();
+            this._setupEventHandlers();
+        }
+        static getInstance(el) {
+            return el.M_Tooltip;
+        }
+        destroy() {
+            this.tooltipEl.remove();
+            this._removeEventHandlers();
+            this.el.M_Tooltip = undefined;
+        }
+        _appendTooltipEl() {
+            const tooltipEl = document.createElement('div');
+            tooltipEl.classList.add('material-tooltip');
+            this.tooltipEl = tooltipEl;
+            const tooltipContentEl = document.createElement('div');
+            tooltipContentEl.classList.add('tooltip-content');
+            tooltipContentEl.innerHTML = this.options.html || '';
+            tooltipEl.appendChild(tooltipContentEl);
+            document.body.appendChild(tooltipEl);
+        }
+        _updateTooltipContent() {
+            const contentEl = this.tooltipEl.querySelector('.tooltip-content');
+            if (contentEl) {
+                contentEl.innerHTML = this.options.html || '';
+            }
+        }
+        _setupEventHandlers() {
+            this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
+            this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
+            this._handleFocusBound = this._handleFocus.bind(this);
+            this._handleBlurBound = this._handleBlur.bind(this);
+            this.el.addEventListener('mouseenter', this._handleMouseEnterBound);
+            this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
+            this.el.addEventListener('focus', this._handleFocusBound, true);
+            this.el.addEventListener('blur', this._handleBlurBound, true);
+        }
+        _removeEventHandlers() {
+            this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
+            this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
+            this.el.removeEventListener('focus', this._handleFocusBound, true);
+            this.el.removeEventListener('blur', this._handleBlurBound, true);
+        }
+        open(isManual = true) {
+            if (this.state.isOpen) {
+                return;
+            }
+            this.state.isOpen = true;
+            // Update tooltip content with data attributes
+            this.options = Object.assign(Object.assign({}, this.options), this._getAttributeOptions());
+            this._updateTooltipContent();
+            this._setEnterDelayTimeout(isManual);
+        }
+        close() {
+            if (!this.state.isOpen) {
+                return;
+            }
+            this.state.isHovered = false;
+            this.state.isFocused = false;
+            this.state.isOpen = false;
+            this._setExitDelayTimeout();
+        }
+        _setExitDelayTimeout() {
+            if (this.state.exitDelayTimeout) {
+                clearTimeout(this.state.exitDelayTimeout);
+            }
+            this.state.exitDelayTimeout = window.setTimeout(() => {
+                if (this.state.isHovered || this.state.isFocused) {
+                    return;
+                }
+                this._animateOut();
+            }, this.options.exitDelay);
+        }
+        _setEnterDelayTimeout(isManual) {
+            if (this.state.enterDelayTimeout) {
+                clearTimeout(this.state.enterDelayTimeout);
+            }
+            this.state.enterDelayTimeout = window.setTimeout(() => {
+                if (!this.state.isHovered && !this.state.isFocused && !isManual) {
+                    return;
+                }
+                this._animateIn();
+            }, this.options.enterDelay);
+        }
+        _positionTooltip() {
+            const origin = this.el;
+            const tooltip = this.tooltipEl;
+            const originHeight = origin.offsetHeight;
+            const originWidth = origin.offsetWidth;
+            const tooltipHeight = tooltip.offsetHeight;
+            const tooltipWidth = tooltip.offsetWidth;
+            const margin = this.options.margin;
+            this.state.xMovement = 0;
+            this.state.yMovement = 0;
+            const originRect = origin.getBoundingClientRect();
+            let targetTop = originRect.top + window.pageYOffset;
+            let targetLeft = originRect.left + window.pageXOffset;
+            switch (this.options.position) {
+                case 'top':
+                    targetTop += -tooltipHeight - margin;
+                    targetLeft += originWidth / 2 - tooltipWidth / 2;
+                    this.state.yMovement = -this.options.transitionMovement;
+                    break;
+                case 'right':
+                    targetTop += originHeight / 2 - tooltipHeight / 2;
+                    targetLeft += originWidth + margin;
+                    this.state.xMovement = this.options.transitionMovement;
+                    break;
+                case 'left':
+                    targetTop += originHeight / 2 - tooltipHeight / 2;
+                    targetLeft += -tooltipWidth - margin;
+                    this.state.xMovement = -this.options.transitionMovement;
+                    break;
+                case 'bottom':
+                default:
+                    targetTop += originHeight + margin;
+                    targetLeft += originWidth / 2 - tooltipWidth / 2;
+                    this.state.yMovement = this.options.transitionMovement;
+                    break;
+            }
+            const repositioned = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+            this.tooltipEl.style.top = repositioned.y + 'px';
+            this.tooltipEl.style.left = repositioned.x + 'px';
+        }
+        _repositionWithinScreen(x, y, width, height) {
+            const scrollLeft = window.pageXOffset;
+            const scrollTop = window.pageYOffset;
+            let newX = x - scrollLeft;
+            let newY = y - scrollTop;
+            const offset = this.options.margin + this.options.transitionMovement;
+            // Check boundaries
+            if (newX < offset) {
+                newX = offset;
+            }
+            else if (newX + width > window.innerWidth - offset) {
+                newX = window.innerWidth - width - offset;
+            }
+            if (newY < offset) {
+                newY = offset;
+            }
+            else if (newY + height > window.innerHeight - offset) {
+                newY = window.innerHeight - height - offset;
+            }
+            return {
+                x: newX + scrollLeft,
+                y: newY + scrollTop,
+            };
+        }
+        _animateIn() {
+            this._positionTooltip();
+            this.tooltipEl.style.visibility = 'visible';
+            // CSS animation
+            this.tooltipEl.style.cssText += `
+      opacity: 0;
+      transform: translate(0, 0);
+      transition: opacity ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
+                  transform ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    `;
+            setTimeout(() => {
+                this.tooltipEl.style.opacity = '1';
+                this.tooltipEl.style.transform = `translate(${this.state.xMovement}px, ${this.state.yMovement}px)`;
+            }, 10);
+        }
+        _animateOut() {
+            this.tooltipEl.style.cssText += `
+      transition: opacity ${this.options.outDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
+                  transform ${this.options.outDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
+      opacity: 0;
+      transform: translate(0, 0);
+    `;
+            setTimeout(() => {
+                this.tooltipEl.style.visibility = 'hidden';
+            }, this.options.outDuration);
+        }
+        _handleMouseEnter() {
+            this.state.isHovered = true;
+            this.state.isFocused = false;
+            this.open(false);
+        }
+        _handleMouseLeave() {
+            this.state.isHovered = false;
+            this.state.isFocused = false;
+            this.close();
+        }
+        _handleFocus() {
+            this.state.isFocused = true;
+            this.open(false);
+        }
+        _handleBlur() {
+            this.state.isFocused = false;
+            this.close();
+        }
+        _getAttributeOptions() {
+            const attributeOptions = {};
+            const tooltipText = this.el.getAttribute('data-tooltip');
+            const position = this.el.getAttribute('data-position');
+            if (tooltipText) {
+                attributeOptions.html = tooltipText;
+            }
+            if (position && ['top', 'bottom', 'left', 'right'].includes(position)) {
+                attributeOptions.position = position;
+            }
+            return attributeOptions;
+        }
+    }
+    Tooltip.defaults = {
+        exitDelay: 200,
+        enterDelay: 0,
+        html: null,
+        margin: 5,
+        inDuration: 250,
+        outDuration: 200,
+        position: 'bottom',
+        transitionMovement: 10,
+    };
+    const TooltipComponent = () => {
+        let tooltipInstance = null;
+        return {
+            oncreate: ({ attrs }) => {
+                if (attrs.targetSelector) {
+                    const targetEl = document.querySelector(attrs.targetSelector);
+                    if (targetEl) {
+                        tooltipInstance = new Tooltip(targetEl, attrs);
+                    }
+                }
+            },
+            onremove: () => {
+                if (tooltipInstance) {
+                    tooltipInstance.destroy();
+                    tooltipInstance = null;
+                }
+            },
+            view: () => null, // This component doesn't render anything itself
+        };
+    };
+    // Helper function to initialize tooltips on elements
+    const initTooltips = (selector = '[data-tooltip]', options = {}) => {
+        const elements = document.querySelectorAll(selector);
+        const tooltips = [];
+        elements.forEach((el) => {
+            if (!el.M_Tooltip) {
+                tooltips.push(new Tooltip(el, options));
+            }
+        });
+        return tooltips;
+    };
+
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
     exports.Button = Button;
@@ -4244,6 +5375,8 @@
     exports.Pagination = Pagination;
     exports.Parallax = Parallax;
     exports.PasswordInput = PasswordInput;
+    exports.Pushpin = Pushpin;
+    exports.PushpinComponent = PushpinComponent;
     exports.RadioButton = RadioButton;
     exports.RadioButtons = RadioButtons;
     exports.RangeInput = RangeInput;
@@ -4258,11 +5391,18 @@
     exports.TextArea = TextArea;
     exports.TextInput = TextInput;
     exports.TimePicker = TimePicker;
+    exports.Toast = Toast;
+    exports.ToastComponent = ToastComponent;
+    exports.Tooltip = Tooltip;
+    exports.TooltipComponent = TooltipComponent;
     exports.UrlInput = UrlInput;
     exports.getDropdownStyles = getDropdownStyles;
+    exports.initPushpins = initPushpins;
+    exports.initTooltips = initTooltips;
     exports.isNumeric = isNumeric;
     exports.padLeft = padLeft;
     exports.range = range;
+    exports.toast = toast;
     exports.uniqueId = uniqueId;
     exports.uuid4 = uuid4;