mithril-materialized 3.2.1 → 3.3.0

package/dist/index.esm.js

@@ -2789,10 +2789,6 @@ const CharacterCounter = () => {
             return m('span.character-counter', {
                 style: {
                     color: isOverLimit ? '#F44336' : '#9e9e9e',
-                    fontSize: '12px',
-                    display: 'block',
-                    textAlign: 'right',
-                    marginTop: '8px',
                 },
             }, `${currentLength}/${maxLength}`);
         },
@@ -2809,111 +2805,197 @@ const TextArea = () => {
         textarea: undefined,
         internalValue: '',
     };
-    const updateHeight = (textarea) => {
-        textarea.style.height = 'auto';
-        const newHeight = textarea.scrollHeight + 'px';
-        state.height = textarea.value.length === 0 ? undefined : newHeight;
+    const updateHeight = (textarea, hiddenDiv) => {
+        if (!textarea || !hiddenDiv)
+            return;
+        // Copy font properties from textarea to hidden div
+        const computedStyle = window.getComputedStyle(textarea);
+        hiddenDiv.style.fontFamily = computedStyle.fontFamily;
+        hiddenDiv.style.fontSize = computedStyle.fontSize;
+        hiddenDiv.style.lineHeight = computedStyle.lineHeight;
+        // Copy padding from textarea (important for accurate measurement)
+        hiddenDiv.style.paddingTop = computedStyle.paddingTop;
+        hiddenDiv.style.paddingRight = computedStyle.paddingRight;
+        hiddenDiv.style.paddingBottom = computedStyle.paddingBottom;
+        hiddenDiv.style.paddingLeft = computedStyle.paddingLeft;
+        // Handle text wrapping
+        if (textarea.getAttribute('wrap') === 'off') {
+            hiddenDiv.style.overflowWrap = 'normal';
+            hiddenDiv.style.whiteSpace = 'pre';
+        }
+        else {
+            hiddenDiv.style.overflowWrap = 'break-word';
+            hiddenDiv.style.whiteSpace = 'pre-wrap';
+        }
+        // Set content with extra newline for measurement
+        hiddenDiv.textContent = textarea.value + '\n';
+        const content = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+        hiddenDiv.innerHTML = content;
+        // Set width to match textarea
+        if (textarea.offsetWidth > 0) {
+            hiddenDiv.style.width = textarea.offsetWidth + 'px';
+        }
+        else {
+            hiddenDiv.style.width = window.innerWidth / 2 + 'px';
+        }
+        // Get the original/natural height of the textarea
+        const originalHeight = textarea.offsetHeight;
+        const measuredHeight = hiddenDiv.offsetHeight;
+        // Key logic: Only set custom height when content requires MORE space than original height
+        // This matches the Materialize CSS reference behavior
+        if (originalHeight <= measuredHeight) {
+            state.height = measuredHeight + 'px';
+        }
+        else {
+            // Single line content or content that fits in original height - let CSS handle it
+            state.height = undefined;
+        }
     };
-    const isControlled = (attrs) => attrs.value !== undefined && attrs.oninput !== undefined;
+    const isControlled = (attrs) => attrs.value !== undefined && (attrs.oninput !== undefined || attrs.onchange !== undefined);
     return {
         oninit: ({ attrs }) => {
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            // Warn developer for improper controlled usage
+            if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                console.warn(`TextArea received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                    `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
+            }
             // Initialize internal value for uncontrolled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 state.internalValue = attrs.defaultValue || '';
             }
         },
         onremove: () => {
         },
         view: ({ attrs }) => {
+            var _a, _b, _c, _d;
             const { className = 'col s12', helperText, iconName, id = state.id, value, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "value", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
             const controlled = isControlled(attrs);
-            const currentValue = controlled ? value || '' : state.internalValue;
-            return m('.input-field', { className, style }, [
-                iconName ? m('i.material-icons.prefix', iconName) : '',
-                m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
-                        height: state.height,
-                    }, oncreate: ({ dom }) => {
-                        const textarea = (state.textarea = dom);
-                        // For uncontrolled mode, set initial value only
-                        if (!controlled && attrs.defaultValue !== undefined) {
-                            textarea.value = String(attrs.defaultValue);
-                        }
-                        updateHeight(textarea);
-                        // Update character count state for counter component
-                        if (maxLength) {
-                            state.currentLength = textarea.value.length;
-                            m.redraw();
-                        }
-                    }, onupdate: ({ dom }) => {
-                        const textarea = dom;
-                        if (state.height)
-                            textarea.style.height = state.height;
-                        // No need to manually sync in onupdate since value attribute handles it
-                    }, onfocus: () => {
-                        state.active = true;
-                    }, oninput: (e) => {
-                        state.active = true;
-                        state.hasInteracted = false;
-                        const target = e.target;
-                        // Update height for auto-resize
-                        updateHeight(target);
-                        // Update character count
-                        if (maxLength) {
-                            state.currentLength = target.value.length;
-                            state.hasInteracted = target.value.length > 0;
-                        }
-                        // Update internal state for uncontrolled mode
-                        if (!controlled) {
-                            state.internalValue = target.value;
-                        }
-                        // Call oninput handler
-                        if (oninput) {
-                            oninput(target.value);
-                        }
-                    }, onblur: (e) => {
-                        state.active = false;
-                        // const target = e.target as HTMLTextAreaElement;
-                        state.hasInteracted = true;
-                        // Call original onblur if provided
-                        if (onblur) {
-                            onblur(e);
-                        }
-                        if (onchange && state.textarea) {
-                            onchange(state.textarea.value);
-                        }
-                    }, onkeyup: onkeyup
-                        ? (ev) => {
-                            onkeyup(ev, ev.target.value);
-                        }
-                        : undefined, onkeydown: onkeydown
-                        ? (ev) => {
-                            onkeydown(ev, ev.target.value);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            let currentValue;
+            if (controlled) {
+                currentValue = value || '';
+            }
+            else if (isNonInteractive) {
+                // Non-interactive components: prefer defaultValue, fallback to value
+                currentValue = (_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : value) !== null && _b !== void 0 ? _b : '';
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                currentValue = (_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : '';
+            }
+            return [
+                // Hidden div for height measurement - positioned outside the input-field
+                m('.hiddendiv', {
+                    style: {
+                        visibility: 'hidden',
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        zIndex: '-1',
+                        whiteSpace: 'pre-wrap',
+                        wordWrap: 'break-word',
+                        overflowWrap: 'break-word',
+                    },
+                    oncreate: ({ dom }) => {
+                        const hiddenDiv = dom;
+                        if (state.textarea) {
+                            updateHeight(state.textarea, hiddenDiv);
                         }
-                        : undefined, onkeypress: onkeypress
-                        ? (ev) => {
-                            onkeypress(ev, ev.target.value);
+                    },
+                    onupdate: ({ dom }) => {
+                        const hiddenDiv = dom;
+                        if (state.textarea) {
+                            updateHeight(state.textarea, hiddenDiv);
                         }
-                        : undefined })),
-                m(Label, {
-                    label,
-                    id,
-                    isMandatory,
-                    isActive: currentValue || placeholder || state.active,
-                    initialValue: currentValue !== '',
-                }),
-                m(HelperText, {
-                    helperText,
-                    dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
-                    dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                    },
                 }),
-                maxLength
-                    ? m(CharacterCounter, {
-                        currentLength: state.currentLength,
-                        maxLength,
-                        show: state.currentLength > 0,
-                    })
-                    : undefined,
-            ]);
+                m('.input-field', { className, style }, [
+                    iconName ? m('i.material-icons.prefix', iconName) : '',
+                    m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
+                            height: state.height,
+                        }, oncreate: ({ dom }) => {
+                            const textarea = (state.textarea = dom);
+                            // For uncontrolled mode, set initial value only
+                            if (!controlled && attrs.defaultValue !== undefined) {
+                                textarea.value = String(attrs.defaultValue);
+                            }
+                            // Height will be calculated by hidden div
+                            // Update character count state for counter component
+                            if (maxLength) {
+                                state.currentLength = textarea.value.length;
+                            }
+                        }, onupdate: ({ dom }) => {
+                            const textarea = dom;
+                            if (state.height)
+                                textarea.style.height = state.height;
+                            // No need to manually sync in onupdate since value attribute handles it
+                        }, onfocus: () => {
+                            state.active = true;
+                        }, oninput: (e) => {
+                            state.active = true;
+                            state.hasInteracted = false;
+                            const target = e.target;
+                            // Height will be recalculated by hidden div on next update
+                            // Update character count
+                            if (maxLength) {
+                                state.currentLength = target.value.length;
+                                state.hasInteracted = target.value.length > 0;
+                            }
+                            // Update internal state for uncontrolled mode
+                            if (!controlled) {
+                                state.internalValue = target.value;
+                            }
+                            // Call oninput handler
+                            if (oninput) {
+                                oninput(target.value);
+                            }
+                        }, onblur: (e) => {
+                            state.active = false;
+                            // const target = e.target as HTMLTextAreaElement;
+                            state.hasInteracted = true;
+                            // Call original onblur if provided
+                            if (onblur) {
+                                onblur(e);
+                            }
+                            if (onchange && state.textarea) {
+                                onchange(state.textarea.value);
+                            }
+                        }, onkeyup: onkeyup
+                            ? (ev) => {
+                                onkeyup(ev, ev.target.value);
+                            }
+                            : undefined, onkeydown: onkeydown
+                            ? (ev) => {
+                                onkeydown(ev, ev.target.value);
+                            }
+                            : undefined, onkeypress: onkeypress
+                            ? (ev) => {
+                                onkeypress(ev, ev.target.value);
+                            }
+                            : undefined })),
+                    m(Label, {
+                        label,
+                        id,
+                        isMandatory,
+                        isActive: currentValue || placeholder || state.active,
+                        initialValue: currentValue !== '',
+                    }),
+                    m(HelperText, {
+                        helperText,
+                        dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
+                        dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                    }),
+                    maxLength
+                        ? m(CharacterCounter, {
+                            currentLength: state.currentLength,
+                            maxLength,
+                            show: state.currentLength > 0,
+                        })
+                        : undefined,
+                ]),
+            ];
         },
     };
 };
@@ -2933,7 +3015,8 @@ const InputField = (type, defaultClass = '') => () => {
         isDragging: false,
         activeThumb: null,
     };
-    const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' && typeof attrs.oninput === 'function';
+    const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' &&
+        (typeof attrs.oninput === 'function' || typeof attrs.onchange === 'function');
     const getValue = (target) => {
         const val = target.value;
         return (val ? (type === 'number' || type === 'range' ? +val : val) : val);
@@ -2979,8 +3062,15 @@ const InputField = (type, defaultClass = '') => () => {
     // Range slider rendering functions are now in separate module
     return {
         oninit: ({ attrs }) => {
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            // Warn developer for improper controlled usage
+            if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                console.warn(`${type} input received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                    `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
+            }
             // Initialize internal value if not in controlled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 const isNumeric = ['number', 'range'].includes(type);
                 if (attrs.defaultValue !== undefined) {
                     if (isNumeric) {
@@ -2996,7 +3086,7 @@ const InputField = (type, defaultClass = '') => () => {
             }
         },
         view: ({ attrs }) => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
             // const attributes = toAttrs(params);
             const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
@@ -3016,7 +3106,19 @@ const InputField = (type, defaultClass = '') => () => {
             }
             const isNumeric = ['number', 'range'].includes(type);
             const controlled = isControlled(attrs);
-            const value = (controlled ? attrs.value : state.internalValue);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            let value;
+            if (controlled) {
+                value = attrs.value;
+            }
+            else if (isNonInteractive) {
+                // Non-interactive components: prefer defaultValue, fallback to value
+                value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+            }
             const rangeType = type === 'range' && !attrs.minmax;
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -3085,7 +3187,9 @@ const InputField = (type, defaultClass = '') => () => {
                                 state.isValid = true;
                             }
                         }
-                        else if ((type === 'email' || type === 'url') && target.classList.contains('invalid') && target.value.length > 0) {
+                        else if ((type === 'email' || type === 'url') &&
+                            target.classList.contains('invalid') &&
+                            target.value.length > 0) {
                             // Clear native validation errors if user is typing and input becomes valid
                             if (target.validity.valid) {
                                 target.classList.remove('invalid');
@@ -3180,7 +3284,7 @@ const InputField = (type, defaultClass = '') => () => {
                         }
                     } })),
                 // Clear button - only for text inputs with canClear enabled and has content
-                canClear && type === 'text' && ((_b = state.inputElement) === null || _b === void 0 ? void 0 : _b.value)
+                canClear && type === 'text' && ((_f = state.inputElement) === null || _f === void 0 ? void 0 : _f.value)
                     ? m(MaterialIcon, {
                         name: 'close',
                         className: 'input-clear-btn',
@@ -5577,17 +5681,35 @@ const RadioButtons = () => {
     return {
         oninit: ({ attrs }) => {
             state.componentId = attrs.id || uniqueId();
+            const controlled = isControlled(attrs);
+            // Warn developer for improper controlled usage
+            if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
+                console.warn(`RadioButtons component received 'checkedId' prop without 'onchange' handler. ` +
+                    `Use 'defaultCheckedId' for uncontrolled components or add 'onchange' for controlled components.`);
+            }
             // Initialize internal state for uncontrolled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 state.internalCheckedId = attrs.defaultCheckedId;
             }
         },
         view: ({ attrs }) => {
+            var _a, _b;
             const { checkedId, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange, } = attrs;
             const { groupId, componentId } = state;
             const controlled = isControlled(attrs);
             // Get current checked ID from props or internal state
-            const currentCheckedId = controlled ? checkedId : state.internalCheckedId;
+            let currentCheckedId;
+            if (controlled) {
+                currentCheckedId = checkedId;
+            }
+            else if (disabled) {
+                // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
+                currentCheckedId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : checkedId;
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                currentCheckedId = (_b = state.internalCheckedId) !== null && _b !== void 0 ? _b : attrs.defaultCheckedId;
+            }
             const handleChange = (id) => {
                 // Update internal state for uncontrolled mode
                 if (!controlled) {
@@ -5717,8 +5839,14 @@ const Select = () => {
     return {
         oninit: ({ attrs }) => {
             state.id = attrs.id || uniqueId();
+            const controlled = isControlled(attrs);
+            // Warn developer for improper controlled usage
+            if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
+                console.warn(`Select component received 'checkedId' prop without 'onchange' handler. ` +
+                    `Use 'defaultCheckedId' for uncontrolled components or add 'onchange' for controlled components.`);
+            }
             // Initialize internal state for uncontrolled mode
-            if (!isControlled(attrs)) {
+            if (!controlled) {
                 const defaultIds = attrs.defaultCheckedId !== undefined
                     ? Array.isArray(attrs.defaultCheckedId)
                         ? attrs.defaultCheckedId
@@ -5734,16 +5862,32 @@ const Select = () => {
             document.removeEventListener('click', closeDropdown);
         },
         view: ({ attrs }) => {
+            var _a;
             const controlled = isControlled(attrs);
+            const { disabled } = attrs;
             // Get selected IDs from props or internal state
-            const selectedIds = controlled
-                ? attrs.checkedId !== undefined
+            let selectedIds;
+            if (controlled) {
+                selectedIds = attrs.checkedId !== undefined
                     ? Array.isArray(attrs.checkedId)
                         ? attrs.checkedId
                         : [attrs.checkedId]
-                    : []
-                : state.internalSelectedIds;
-            const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, disabled, style, } = attrs;
+                    : [];
+            }
+            else if (disabled) {
+                // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
+                const fallbackId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : attrs.checkedId;
+                selectedIds = fallbackId !== undefined
+                    ? Array.isArray(fallbackId)
+                        ? fallbackId
+                        : [fallbackId]
+                    : [];
+            }
+            else {
+                // Interactive uncontrolled: use internal state
+                selectedIds = state.internalSelectedIds;
+            }
+            const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, } = attrs;
             const finalClassName = newRow ? `${className} clear` : className;
             const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
             return m('.input-field.select-space', {
@@ -8480,6 +8624,269 @@ const ImageList = () => {
     };
 };
 
+/** Default star icons */
+const DEFAULT_ICONS = {
+    filled: '★',
+    empty: '☆',
+    half: '☆', // We'll handle half-fill with CSS
+};
+/** Create a Rating component */
+const Rating = () => {
+    const state = {
+        id: uniqueId(),
+        internalValue: 0,
+        hoverValue: null,
+        isHovering: false,
+        isFocused: false,
+    };
+    const isControlled = (attrs) => typeof attrs.value !== 'undefined' && typeof attrs.onchange === 'function';
+    const getCurrentValue = (attrs) => {
+        var _a, _b, _c, _d;
+        const controlled = isControlled(attrs);
+        const isNonInteractive = attrs.readonly || attrs.disabled;
+        if (controlled) {
+            return attrs.value || 0;
+        }
+        // Non-interactive components: prefer defaultValue, fallback to value
+        if (isNonInteractive) {
+            return (_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : 0;
+        }
+        // Interactive uncontrolled: use internal state (user can change it)
+        return (_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : 0;
+    };
+    const getDisplayValue = (attrs) => state.isHovering && state.hoverValue !== null ? state.hoverValue : getCurrentValue(attrs);
+    const getLabelText = (value, max, getLabelFn) => {
+        if (getLabelFn) {
+            return getLabelFn(value, max);
+        }
+        if (value === 0) {
+            return `No rating`;
+        }
+        if (value === 1) {
+            return `1 star out of ${max}`;
+        }
+        return `${value} stars out of ${max}`;
+    };
+    const getSizeClass = (size = 'medium') => {
+        switch (size) {
+            case 'small':
+                return 'rating--small';
+            case 'large':
+                return 'rating--large';
+            default:
+                return 'rating--medium';
+        }
+    };
+    const getDensityClass = (density = 'standard') => {
+        switch (density) {
+            case 'compact':
+                return 'rating--compact';
+            case 'comfortable':
+                return 'rating--comfortable';
+            default:
+                return 'rating--standard';
+        }
+    };
+    const handleItemClick = (attrs, clickValue) => {
+        var _a;
+        if (attrs.readonly || attrs.disabled)
+            return;
+        const currentValue = getCurrentValue(attrs);
+        const newValue = attrs.clearable && currentValue === clickValue ? 0 : clickValue;
+        if (!isControlled(attrs)) {
+            state.internalValue = newValue;
+        }
+        (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+    };
+    const handleItemHover = (attrs, hoverValue) => {
+        var _a;
+        if (attrs.readonly || attrs.disabled)
+            return;
+        state.hoverValue = hoverValue;
+        state.isHovering = true;
+        (_a = attrs.onmouseover) === null || _a === void 0 ? void 0 : _a.call(attrs, hoverValue);
+    };
+    const handleMouseLeave = (attrs) => {
+        if (attrs.readonly || attrs.disabled)
+            return;
+        state.isHovering = false;
+        state.hoverValue = null;
+    };
+    const handleKeyDown = (attrs, e) => {
+        var _a;
+        if (attrs.readonly || attrs.disabled)
+            return;
+        const max = attrs.max || 5;
+        const step = attrs.step || 1;
+        const currentValue = getCurrentValue(attrs);
+        let newValue = currentValue;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                e.preventDefault();
+                newValue = Math.min(max, currentValue + step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                e.preventDefault();
+                newValue = Math.max(0, currentValue - step);
+                break;
+            case 'Home':
+                e.preventDefault();
+                newValue = attrs.clearable ? 0 : step;
+                break;
+            case 'End':
+                e.preventDefault();
+                newValue = max;
+                break;
+            case ' ':
+            case 'Enter':
+                e.preventDefault();
+                // If focused and not hovering, increment by step
+                if (!state.isHovering) {
+                    newValue = currentValue + step > max ? (attrs.clearable ? 0 : step) : currentValue + step;
+                }
+                break;
+            case 'Escape':
+                if (attrs.clearable) {
+                    e.preventDefault();
+                    newValue = 0;
+                }
+                break;
+            default:
+                return;
+        }
+        if (newValue !== currentValue) {
+            if (!isControlled(attrs)) {
+                state.internalValue = newValue;
+            }
+            (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+        }
+    };
+    const RatingItem = () => {
+        return {
+            view: ({ attrs }) => {
+                const { index, displayValue, step, icons, allowHalfSteps, disabled, onclick, onmouseover } = attrs;
+                const itemValue = (index + 1) * step;
+                // Calculate fill state based on displayValue vs itemValue
+                const diff = displayValue - itemValue;
+                const fillState = diff >= 0 ? 'full' : allowHalfSteps && diff >= -step / 2 ? 'half' : 'empty';
+                return m('.rating__item', {
+                    className: [
+                        fillState === 'full' ? 'rating__item--filled' : '',
+                        fillState === 'half' ? 'rating__item--half' : '',
+                        fillState !== 'empty' ? 'rating__item--active' : '',
+                        disabled ? 'rating__item--disabled' : '',
+                    ]
+                        .filter(Boolean)
+                        .join(' '),
+                    onclick,
+                    onmouseover,
+                }, [
+                    // Empty icon (background)
+                    m('.rating__icon.rating__icon--empty', { 'aria-hidden': 'true' }, typeof icons.empty === 'string' ? icons.empty : m(icons.empty)),
+                    // Filled icon (foreground)
+                    m('.rating__icon.rating__icon--filled', {
+                        'aria-hidden': 'true',
+                        style: {
+                            clipPath: fillState === 'half' ? 'inset(0 50% 0 0)' : undefined,
+                        },
+                    }, typeof icons.filled === 'string' ? icons.filled : m(icons.filled)),
+                ]);
+            },
+        };
+    };
+    return {
+        oninit: ({ attrs }) => {
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            // Warn developer for improper controlled usage
+            if (attrs.value !== undefined && !controlled && !isNonInteractive) {
+                console.warn(`Rating component received 'value' prop without 'onchange' handler. ` +
+                    `Use 'defaultValue' for uncontrolled components or add 'onchange' for controlled components.`);
+            }
+            if (!controlled) {
+                state.internalValue = attrs.defaultValue || 0;
+            }
+        },
+        view: ({ attrs }) => {
+            const { max = 5, step = 1, size = 'medium', density = 'standard', className = '', style = {}, readonly: readonly = false, disabled = false, id = state.id, name } = attrs, ariaAttrs = __rest(attrs, ["max", "step", "size", "density", "className", "style", "readonly", "disabled", "id", "name"]);
+            const currentValue = getCurrentValue(attrs);
+            const displayValue = getDisplayValue(attrs);
+            const itemCount = Math.ceil(max / step);
+            return m('.rating', {
+                className: [
+                    'rating',
+                    getSizeClass(size),
+                    getDensityClass(density),
+                    readonly ? 'rating--read-only' : '',
+                    disabled ? 'rating--disabled' : '',
+                    state.isFocused ? 'rating--focused' : '',
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(' '),
+                style,
+                id,
+                role: readonly ? 'img' : 'slider',
+                tabindex: readonly || disabled ? -1 : 0,
+                'aria-valuemin': 0,
+                'aria-valuemax': max,
+                'aria-valuenow': currentValue,
+                'aria-valuetext': getLabelText(currentValue, max, attrs.getLabelText),
+                'aria-label': ariaAttrs['aria-label'] ||
+                    attrs.ariaLabel ||
+                    `Rating: ${getLabelText(currentValue, max, attrs.getLabelText)}`,
+                'aria-labelledby': ariaAttrs['aria-labelledby'],
+                'aria-readonly': readonly,
+                'aria-disabled': disabled,
+                onkeydown: (e) => handleKeyDown(attrs, e),
+                onfocus: () => {
+                    state.isFocused = true;
+                },
+                onblur: () => {
+                    state.isFocused = false;
+                    handleMouseLeave(attrs);
+                },
+                onmouseleave: () => handleMouseLeave(attrs),
+            }, [
+                // Hidden input for form submission
+                name &&
+                    m('input', {
+                        type: 'hidden',
+                        name,
+                        value: currentValue,
+                    }),
+                // Rating items
+                m('.rating__items', {
+                    className: 'rating__items',
+                }, 
+                // Array.from({ length: itemCount }, (_, i) => renderRatingItem(attrs, i))
+                [...Array(itemCount)].map((_, i) => {
+                    const itemValue = (i + 1) * step;
+                    return m(RatingItem, {
+                        key: `rating-item-${i}`,
+                        index: i,
+                        displayValue: displayValue,
+                        step,
+                        icons: Object.assign(Object.assign({}, DEFAULT_ICONS), attrs.icon),
+                        allowHalfSteps: attrs.allowHalfSteps,
+                        disabled: attrs.disabled,
+                        onclick: () => handleItemClick(attrs, itemValue),
+                        onmouseover: () => handleItemHover(attrs, itemValue),
+                    });
+                })),
+                // Screen reader text
+                m('.rating__sr-only', {
+                    className: 'rating__sr-only',
+                    'aria-live': 'polite',
+                    'aria-atomic': 'true',
+                }, getLabelText(displayValue, max, attrs.getLabelText)),
+            ]);
+        },
+    };
+};
+
 /**
  * @fileoverview Core TypeScript utility types for mithril-materialized library
  * These types improve type safety and developer experience across all components
@@ -8501,4 +8908,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };
+export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, createBreadcrumb, getDropdownStyles, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, toast, uniqueId, uuid4 };