mithril-materialized 3.2.1 → 3.3.0

package/dist/index.umd.js

@@ -2793,10 +2793,6 @@
                 return m('span.character-counter', {
                     style: {
                         color: isOverLimit ? '#F44336' : '#9e9e9e',
-                        fontSize: '12px',
-                        display: 'block',
-                        textAlign: 'right',
-                        marginTop: '8px',
                     },
                 }, `${currentLength}/${maxLength}`);
             },
@@ -2813,111 +2809,197 @@
             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,
+                    ]),
+                ];
             },
         };
     };
@@ -2937,7 +3019,8 @@
             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);
@@ -2983,8 +3066,15 @@
         // 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) {
@@ -3000,7 +3090,7 @@
                 }
             },
             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;
@@ -3020,7 +3110,19 @@
                 }
                 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,
@@ -3089,7 +3191,9 @@
                                     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');
@@ -3184,7 +3288,7 @@
                             }
                         } })),
                     // 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',
@@ -5581,17 +5685,35 @@
         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) {
@@ -5721,8 +5843,14 @@
         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
@@ -5738,16 +5866,32 @@
                 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', {
@@ -8484,6 +8628,269 @@
         };
     };
 
+    /** 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
@@ -8552,6 +8959,7 @@
     exports.RadioButton = RadioButton;
     exports.RadioButtons = RadioButtons;
     exports.RangeInput = RangeInput;
+    exports.Rating = Rating;
     exports.RoundIconButton = RoundIconButton;
     exports.SearchSelect = SearchSelect;
     exports.SecondaryContent = SecondaryContent;