mithril-materialized 3.12.0 → 3.14.0

package/dist/index.umd.js

@@ -622,6 +622,85 @@
         },
     });
 
+    const iconPaths = {
+        caret: [
+            'M7 10l5 5 5-5z', // arrow
+            'M0 0h24v24H0z', // background
+        ],
+        close: [
+            'M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z',
+            'M0 0h24v24H0z',
+        ],
+        chevron: [
+            'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
+            'M0 0h24v24H0z', // background
+        ],
+        chevron_left: [
+            'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z', // chevron left
+            'M0 0h24v24H0z', // background
+        ],
+        chevron_right: [
+            'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z', // chevron right
+            'M0 0h24v24H0z', // background
+        ],
+        menu: [
+            'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z', // hamburger menu
+            'M0 0h24v24H0z', // background
+        ],
+        expand: [
+            'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
+            'M0 0h24v24H0z', // background
+        ],
+        collapse: [
+            'M19 13H5v-2h14v2z', // minus
+            'M0 0h24v24H0z', // background
+        ],
+        check: [
+            'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z', // checkmark
+            'M0 0h24v24H0z', // background
+        ],
+        radio_checked: [
+            'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button checked
+            'M0 0h24v24H0z', // background
+        ],
+        radio_unchecked: [
+            'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button unchecked
+            'M0 0h24v24H0z', // background
+        ],
+        light_mode: [
+            'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z',
+            'M0 0h24v24H0z', // background
+        ],
+        dark_mode: [
+            'M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z',
+            'M0 0h24v24H0z', // background
+        ],
+        delete: [
+            'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z',
+            'M0 0h24v24H0z', // background
+        ],
+    };
+    const MaterialIcon = () => {
+        return {
+            view: ({ attrs }) => {
+                var _a;
+                const { name, direction = 'down', style } = attrs, props = __rest(attrs, ["name", "direction", "style"]);
+                const rotationMap = {
+                    down: 0,
+                    up: 180,
+                    left: 90,
+                    right: -90,
+                };
+                const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
+                const transform = rotation ? `rotate(${rotation}deg)` : undefined;
+                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '24px', width: '24px', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
+                    d,
+                    fill: d.includes('M0 0h24v24H0z') ? 'none' : 'currentColor',
+                })));
+            },
+        };
+    };
+
     /*!
      * Waves Effect for Mithril Materialized
      * Based on Waves v0.6.4 by Alfiana E. Sibuea
@@ -727,7 +806,7 @@
     const ButtonFactory = (element, defaultClassNames, type = '') => {
         return () => {
             return {
-                view: ({ attrs }) => {
+                view: ({ attrs, children }) => {
                     const { tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
                     iconName, iconClass, label, className, variant } = attrs, params = __rest(attrs, ["tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "variant"]);
                     // Use variant or fallback to factory type
@@ -743,7 +822,7 @@
                         ontouchstart: WavesEffect.onTouchStart,
                         ontouchend: WavesEffect.onTouchEnd
                     } : {};
-                    return m(element, Object.assign(Object.assign(Object.assign({}, params), wavesHandlers), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined);
+                    return m(element, Object.assign(Object.assign(Object.assign({}, params), wavesHandlers), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType }), iconName ? m(Icon, { iconName, className: iconClass || 'left' }) : undefined, label ? label : undefined, children);
                 },
             };
         };
@@ -755,6 +834,54 @@
     const IconButton = ButtonFactory('button', 'btn-flat btn-icon waves-effect waves-teal', 'button');
     const RoundIconButton = ButtonFactory('button', 'btn-floating btn-large waves-effect waves-light', 'button');
     const SubmitButton = ButtonFactory('button', 'btn waves-effect waves-light', 'submit');
+    const RaisedIconButton = ButtonFactory('button', 'btn waves-effect waves-light', 'button');
+    const ConfirmButton = () => {
+        let isConfirming = false;
+        let isBlocked = false;
+        let timeoutId;
+        let blockTimeoutId;
+        const reset = () => {
+            isConfirming = false;
+            isBlocked = false;
+            m.redraw();
+        };
+        const unblock = () => {
+            isBlocked = false;
+        };
+        return {
+            onremove: () => {
+                window.clearTimeout(timeoutId);
+                window.clearTimeout(blockTimeoutId);
+            },
+            view: ({ attrs }) => {
+                const { iconName = 'delete', confirmIconName = 'check', confirmColor = 'red', timeout = 3000, clickDelay = 500, onFirstClick, onclick } = attrs, props = __rest(attrs, ["iconName", "confirmIconName", "confirmColor", "timeout", "clickDelay", "onFirstClick", "onclick"]);
+                const handleClick = (e) => {
+                    e.preventDefault();
+                    if (isBlocked)
+                        return;
+                    if (isConfirming) {
+                        window.clearTimeout(timeoutId);
+                        window.clearTimeout(blockTimeoutId); // Clean up safety
+                        isConfirming = false;
+                        onclick === null || onclick === void 0 ? void 0 : onclick(e);
+                    }
+                    else {
+                        isConfirming = true;
+                        isBlocked = true;
+                        onFirstClick === null || onFirstClick === void 0 ? void 0 : onFirstClick();
+                        timeoutId = window.setTimeout(reset, timeout);
+                        blockTimeoutId = window.setTimeout(unblock, clickDelay);
+                    }
+                };
+                const cn = isConfirming ? confirmColor : 'red-text';
+                const commonProps = Object.assign(Object.assign({}, props), { className: `${props.className || ''} ${cn}`, style: Object.assign(Object.assign(Object.assign({}, props.style), { display: 'flex', alignItems: 'center', justifyContent: 'center' }), (isConfirming ? { padding: '0 8px', width: 'auto', minWidth: 'auto' } : {})), onclick: handleClick });
+                if (isConfirming) {
+                    return m(RaisedIconButton, commonProps, m(MaterialIcon, { name: confirmIconName }));
+                }
+                return m(IconButton, commonProps, m(MaterialIcon, { name: iconName }));
+            },
+        };
+    };
 
     /**
      * Materialize CSS Carousel component with dynamic positioning
@@ -1146,81 +1273,6 @@
         };
     };
 
-    const iconPaths = {
-        caret: [
-            'M7 10l5 5 5-5z', // arrow
-            'M0 0h24v24H0z', // background
-        ],
-        close: [
-            'M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z',
-            'M0 0h24v24H0z',
-        ],
-        chevron: [
-            'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
-            'M0 0h24v24H0z', // background
-        ],
-        chevron_left: [
-            'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z', // chevron left
-            'M0 0h24v24H0z', // background
-        ],
-        chevron_right: [
-            'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z', // chevron right
-            'M0 0h24v24H0z', // background
-        ],
-        menu: [
-            'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z', // hamburger menu
-            'M0 0h24v24H0z', // background
-        ],
-        expand: [
-            'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
-            'M0 0h24v24H0z', // background
-        ],
-        collapse: [
-            'M19 13H5v-2h14v2z', // minus
-            'M0 0h24v24H0z', // background
-        ],
-        check: [
-            'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z', // checkmark
-            'M0 0h24v24H0z', // background
-        ],
-        radio_checked: [
-            'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button checked
-            'M0 0h24v24H0z', // background
-        ],
-        radio_unchecked: [
-            'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z', // radio button unchecked
-            'M0 0h24v24H0z', // background
-        ],
-        light_mode: [
-            'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z',
-            'M0 0h24v24H0z', // background
-        ],
-        dark_mode: [
-            'M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z',
-            'M0 0h24v24H0z', // background
-        ],
-    };
-    const MaterialIcon = () => {
-        return {
-            view: ({ attrs }) => {
-                var _a;
-                const { name, direction = 'down', style } = attrs, props = __rest(attrs, ["name", "direction", "style"]);
-                const rotationMap = {
-                    down: 0,
-                    up: 180,
-                    left: 90,
-                    right: -90,
-                };
-                const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
-                const transform = rotation ? `rotate(${rotation}deg)` : undefined;
-                return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ transform }, style), height: '24px', width: '24px', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), iconPaths[name].map((d) => m('path', {
-                    d,
-                    fill: d.includes('M0 0h24v24H0z') ? 'none' : 'currentColor',
-                })));
-            },
-        };
-    };
-
     const Chips = () => {
         const state = {
             chipsData: [],
@@ -1639,7 +1691,7 @@
     const ListItem = () => {
         return {
             view: ({ attrs: { item, mode } }) => {
-                const { title, content = '', active, iconName, avatar, className, onclick } = item;
+                const { title, content, active, iconName, avatar, className, onclick } = item;
                 return mode === exports.CollectionMode.AVATAR
                     ? m('li.collection-item.avatar', {
                         className: active ? 'active' : '',
@@ -1649,12 +1701,21 @@
                             ? m('img.circle', { src: avatar })
                             : m('i.material-icons.circle', { className }, avatar),
                         m('span.title', title),
-                        m('p', m.trust(content)),
-                        m(SecondaryContent, item),
-                    ])
+                        content ? (typeof content === 'string' ? m('p', m.trust(content)) : m('p', content)) : undefined,
+                        iconName ? m(SecondaryContent, item) : undefined,
+                    ].filter(Boolean))
                     : m('li.collection-item', {
                         className: active ? 'active' : '',
-                    }, iconName ? m('div', [title, m(SecondaryContent, item)]) : title);
+                        onclick: onclick ? () => onclick(item) : undefined,
+                    }, content
+                        ? m('div', [
+                            m('div', title),
+                            typeof content === 'string' ? m('p.secondary-text', content) : content,
+                            iconName ? m(SecondaryContent, item) : undefined,
+                        ].filter(Boolean))
+                        : iconName
+                            ? m('div', [title, m(SecondaryContent, item)])
+                            : title);
             },
         };
     };
@@ -10755,12 +10816,12 @@
         const RatingItem = () => {
             return {
                 view: ({ attrs }) => {
-                    const { index, displayValue, step, icons, allowHalfSteps, disabled, onclick, onmouseover } = attrs;
+                    const { index, displayValue, step, icons, allowHalfSteps, disabled, showTooltip, tooltipLabel, 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', {
+                    return m('.rating__item.no-select', {
                         className: [
                             fillState === 'full' ? 'rating__item--filled' : '',
                             fillState === 'half' ? 'rating__item--half' : '',
@@ -10781,6 +10842,8 @@
                                 clipPath: fillState === 'half' ? 'inset(0 50% 0 0)' : undefined,
                             },
                         }, typeof icons.filled === 'string' ? icons.filled : m(icons.filled)),
+                        // Tooltip
+                        showTooltip && tooltipLabel && m('.rating__tooltip', tooltipLabel),
                     ]);
                 },
             };
@@ -10852,6 +10915,7 @@
                     }, 
                     // Array.from({ length: itemCount }, (_, i) => renderRatingItem(attrs, i))
                     [...Array(itemCount)].map((_, i) => {
+                        var _a;
                         const itemValue = (i + 1) * step;
                         return m(RatingItem, {
                             key: `rating-item-${i}`,
@@ -10861,6 +10925,8 @@
                             icons: Object.assign(Object.assign({}, DEFAULT_ICONS), attrs.icon),
                             allowHalfSteps: attrs.allowHalfSteps,
                             disabled: attrs.disabled,
+                            showTooltip: attrs.showTooltips,
+                            tooltipLabel: (_a = attrs.tooltipLabels) === null || _a === void 0 ? void 0 : _a[i],
                             onclick: () => handleItemClick(attrs, itemValue),
                             onmouseover: () => handleItemHover(attrs, itemValue),
                         });
@@ -10876,6 +10942,237 @@
         };
     };
 
+    /** Create a LikertScale component */
+    const LikertScale = () => {
+        const state = {
+            id: uniqueId(),
+            groupId: uniqueId(),
+            internalValue: undefined,
+            isFocused: false,
+        };
+        const isControlled = (attrs) => typeof attrs.value !== 'undefined' && typeof attrs.onchange === 'function';
+        const getCurrentValue = (attrs) => {
+            var _a, _b;
+            const controlled = isControlled(attrs);
+            const isNonInteractive = attrs.readonly || attrs.disabled;
+            if (controlled) {
+                return attrs.value;
+            }
+            // Non-interactive components: prefer defaultValue, fallback to value
+            if (isNonInteractive) {
+                return (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value;
+            }
+            // Interactive uncontrolled: use internal state (user can change it)
+            return (_b = state.internalValue) !== null && _b !== void 0 ? _b : attrs.defaultValue;
+        };
+        const getLabelText = (value, min, max, getLabelFn) => {
+            if (getLabelFn && value !== undefined) {
+                return getLabelFn(value, min, max);
+            }
+            if (value === undefined) {
+                return `No selection, please choose a value between ${min} and ${max}`;
+            }
+            return `Selected ${value} out of ${min} to ${max}`;
+        };
+        const getSizeClass = (size = 'medium') => {
+            switch (size) {
+                case 'small':
+                    return 'likert-scale--small';
+                case 'large':
+                    return 'likert-scale--large';
+                default:
+                    return 'likert-scale--medium';
+            }
+        };
+        const getDensityClass = (density = 'standard') => {
+            switch (density) {
+                case 'compact':
+                    return 'likert-scale--compact';
+                case 'comfortable':
+                    return 'likert-scale--comfortable';
+                default:
+                    return 'likert-scale--standard';
+            }
+        };
+        const getLayoutClass = (layout = 'responsive') => {
+            switch (layout) {
+                case 'horizontal':
+                    return 'likert-scale--horizontal';
+                case 'vertical':
+                    return 'likert-scale--vertical';
+                default:
+                    return 'likert-scale--responsive';
+            }
+        };
+        const handleChange = (attrs, newValue) => {
+            var _a;
+            if (attrs.readonly || attrs.disabled)
+                return;
+            if (!isControlled(attrs)) {
+                state.internalValue = newValue;
+            }
+            (_a = attrs.onchange) === null || _a === void 0 ? void 0 : _a.call(attrs, newValue);
+        };
+        const handleKeyDown = (attrs, e) => {
+            if (attrs.readonly || attrs.disabled)
+                return;
+            const min = attrs.min || 1;
+            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 = currentValue !== undefined ? Math.min(max, currentValue + step) : min;
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    e.preventDefault();
+                    newValue = currentValue !== undefined ? Math.max(min, currentValue - step) : min;
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    newValue = min;
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    newValue = max;
+                    break;
+                default:
+                    return;
+            }
+            if (newValue !== currentValue) {
+                handleChange(attrs, newValue);
+            }
+        };
+        const LikertScaleItem = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { value, currentValue, showNumber, showTooltip, tooltipLabel, groupId, name, disabled, readonly, onchange, } = attrs;
+                    const radioId = `${groupId}-${value}`;
+                    const isChecked = currentValue === value;
+                    return m('.likert-scale__item.no-select', {
+                        className: [
+                            isChecked ? 'likert-scale__item--checked' : '',
+                            disabled ? 'likert-scale__item--disabled' : '',
+                            readonly ? 'likert-scale__item--readonly' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '),
+                    }, [
+                        // Number label (optional)
+                        showNumber && m('.likert-scale__number', value),
+                        // Radio button input
+                        m('input[type=radio].likert-scale__input', {
+                            id: radioId,
+                            name: name || groupId,
+                            value: value,
+                            checked: isChecked,
+                            disabled: disabled || readonly,
+                            onchange: () => onchange(value),
+                        }),
+                        // Label for radio button
+                        m('label.likert-scale__label', {
+                            for: radioId,
+                        }),
+                        // Tooltip (optional)
+                        showTooltip && tooltipLabel && m('.likert-scale__tooltip', tooltipLabel),
+                    ]);
+                },
+            };
+        };
+        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(`LikertScale component received 'value' prop without 'onchange' handler. ` +
+                        `Use 'defaultValue' for uncontrolled components or add 'onchange' for controlled components.`);
+                }
+                if (!controlled) {
+                    state.internalValue = attrs.defaultValue;
+                }
+            },
+            view: ({ attrs }) => {
+                const { min = 1, max = 5, step = 1, size = 'medium', density = 'standard', layout = 'responsive', className = '', style = {}, readonly = false, disabled = false, id = state.id, name, label, description, isMandatory, startLabel, middleLabel, endLabel, showNumbers = false, showTooltips = false, tooltipLabels, alignLabels = false } = attrs, ariaAttrs = __rest(attrs, ["min", "max", "step", "size", "density", "layout", "className", "style", "readonly", "disabled", "id", "name", "label", "description", "isMandatory", "startLabel", "middleLabel", "endLabel", "showNumbers", "showTooltips", "tooltipLabels", "alignLabels"]);
+                const currentValue = getCurrentValue(attrs);
+                const itemCount = Math.floor((max - min) / step) + 1;
+                // Generate scale values
+                const scaleValues = Array.from({ length: itemCount }, (_, i) => min + i * step);
+                return m('.likert-scale', {
+                    className: [
+                        'likert-scale',
+                        getSizeClass(size),
+                        getDensityClass(density),
+                        getLayoutClass(layout),
+                        readonly ? 'likert-scale--readonly' : '',
+                        disabled ? 'likert-scale--disabled' : '',
+                        state.isFocused ? 'likert-scale--focused' : '',
+                        alignLabels ? 'likert-scale--aligned' : '',
+                        className,
+                    ]
+                        .filter(Boolean)
+                        .join(' '),
+                    style,
+                    id,
+                    role: 'radiogroup',
+                    'aria-label': ariaAttrs['aria-label'] || attrs.ariaLabel || label || `Rating scale from ${min} to ${max}`,
+                    'aria-labelledby': ariaAttrs['aria-labelledby'],
+                    'aria-readonly': readonly,
+                    'aria-disabled': disabled,
+                    onkeydown: (e) => handleKeyDown(attrs, e),
+                    onfocus: () => {
+                        state.isFocused = true;
+                    },
+                    onblur: () => {
+                        state.isFocused = false;
+                    },
+                    tabindex: readonly || disabled ? -1 : 0,
+                }, [
+                    // Label section (only text label, not the description)
+                    label &&
+                        m('.likert-scale__question-label', [
+                            m('span', label + (isMandatory ? ' *' : '')),
+                            description && m('.likert-scale__description', m.trust(description)),
+                        ]),
+                    // Scale section container
+                    m('.likert-scale__scale-container', [
+                        // Scale items with numbers
+                        m('.likert-scale__scale', scaleValues.map((value) => m(LikertScaleItem, {
+                            key: `likert-item-${value}`,
+                            value,
+                            currentValue,
+                            showNumber: showNumbers,
+                            showTooltip: showTooltips,
+                            tooltipLabel: tooltipLabels === null || tooltipLabels === void 0 ? void 0 : tooltipLabels[value - min],
+                            groupId: state.groupId,
+                            name,
+                            disabled,
+                            readonly,
+                            onchange: (v) => handleChange(attrs, v),
+                        }))),
+                        // Scale anchors
+                        (startLabel || middleLabel || endLabel) &&
+                            m('.likert-scale__anchors', [
+                                startLabel && m('.likert-scale__anchor.likert-scale__anchor--start', startLabel),
+                                middleLabel && m('.likert-scale__anchor.likert-scale__anchor--middle', middleLabel),
+                                endLabel && m('.likert-scale__anchor.likert-scale__anchor--end', endLabel),
+                            ]),
+                    ]),
+                    // Screen reader text
+                    m('.likert-scale__sr-only', {
+                        className: 'likert-scale__sr-only',
+                        'aria-live': 'polite',
+                        'aria-atomic': 'true',
+                    }, getLabelText(currentValue, min, max, attrs.getLabelText)),
+                ]);
+            },
+        };
+    };
+
     /**
      * ToggleButton component.
      *
@@ -11210,6 +11507,7 @@
     exports.CollapsibleItem = CollapsibleItem;
     exports.Collection = Collection;
     exports.ColorInput = ColorInput;
+    exports.ConfirmButton = ConfirmButton;
     exports.DataTable = DataTable;
     exports.DatePicker = DatePicker;
     exports.DigitalClock = DigitalClock;
@@ -11227,6 +11525,7 @@
     exports.InputCheckbox = InputCheckbox;
     exports.Label = Label;
     exports.LargeButton = LargeButton;
+    exports.LikertScale = LikertScale;
     exports.LinearProgress = LinearProgress;
     exports.ListItem = ListItem;
     exports.Mandatory = Mandatory;

package/dist/likert-scale.d.ts

@@ -0,0 +1,70 @@
+import { FactoryComponent, Attributes } from 'mithril';
+/** Likert scale component size options */
+export type LikertScaleSize = 'small' | 'medium' | 'large';
+/** Likert scale component density options */
+export type LikertScaleDensity = 'compact' | 'standard' | 'comfortable';
+/** Likert scale layout options */
+export type LikertScaleLayout = 'horizontal' | 'vertical' | 'responsive';
+/** Likert scale component attributes */
+export interface LikertScaleAttrs<T extends number = number> extends Attributes {
+    /** Minimum scale value (default: 1) */
+    min?: number;
+    /** Maximum scale value (default: 5) */
+    max?: number;
+    /** Step size for scale increments (default: 1) */
+    step?: number;
+    /** Current value for controlled mode */
+    value?: T;
+    /** Initial value for uncontrolled mode */
+    defaultValue?: T;
+    /** Callback when value changes */
+    onchange?: (value: T) => void;
+    /** Question/prompt text */
+    label?: string;
+    /** Helper text description */
+    description?: string;
+    /** Anchor label for minimum value (e.g., "Very Unhappy") */
+    startLabel?: string;
+    /** Anchor label for middle value (optional, e.g., "Neutral") */
+    middleLabel?: string;
+    /** Anchor label for maximum value (e.g., "Very Happy") */
+    endLabel?: string;
+    /** Whether to display numeric values (default: false) */
+    showNumbers?: boolean;
+    /** Whether to show tooltips on hover (default: false) */
+    showTooltips?: boolean;
+    /** Custom tooltip labels for each value */
+    tooltipLabels?: string[];
+    /** Density variant (default: 'standard') */
+    density?: LikertScaleDensity;
+    /** Size variant (default: 'medium') */
+    size?: LikertScaleSize;
+    /** Layout mode (default: 'responsive' = horizontal on desktop, vertical on mobile) */
+    layout?: LikertScaleLayout;
+    /** HTML ID for the component */
+    id?: string;
+    /** Name for form submission */
+    name?: string;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Whether the component is read-only */
+    readonly?: boolean;
+    /** If true, add a mandatory '*' after the label */
+    isMandatory?: boolean;
+    /** ARIA label for the component */
+    'aria-label'?: string;
+    /** ARIA label for the component (camelCase alternative) */
+    ariaLabel?: string;
+    /** ARIA labelledby reference */
+    'aria-labelledby'?: string;
+    /** Function to get label text for accessibility */
+    getLabelText?: (value: number, min: number, max: number) => string;
+    /** Class name for the container */
+    className?: string;
+    /** Additional CSS styles */
+    style?: any;
+    /** Use CSS grid for label/scale alignment in multi-question surveys (default: false) */
+    alignLabels?: boolean;
+}
+/** Create a LikertScale component */
+export declare const LikertScale: FactoryComponent<LikertScaleAttrs>;

package/dist/material-icon.d.ts

@@ -13,8 +13,9 @@ declare const iconPaths: {
     readonly radio_unchecked: readonly ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z", "M0 0h24v24H0z"];
     readonly light_mode: readonly ["M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.4 12.4a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-11a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.4a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z", "M0 0h24v24H0z"];
     readonly dark_mode: readonly ["M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z", "M0 0h24v24H0z"];
+    readonly delete: readonly ["M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", "M0 0h24v24H0z"];
 };
-type IconName = keyof typeof iconPaths;
+export type IconName = keyof typeof iconPaths;
 export interface MaterialIconAttrs extends Attributes {
     name: IconName;
     direction?: 'up' | 'down' | 'left' | 'right';

package/dist/utilities.css

@@ -2778,6 +2778,11 @@ td, th {
 .collection .collection-item.active .secondary-content {
   color: var(--mm-text-on-primary, #fff);
 }
+.collection .collection-item .secondary-text {
+  color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
+  font-size: 0.9rem;
+  margin-top: 4px;
+}
 .collection a.collection-item {
   display: block;
   transition: 0.25s;