mithril-materialized 3.12.0 → 3.14.0

package/dist/index.esm.js

@@ -618,6 +618,85 @@ const Icon = () => ({
     },
 });
 
+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
@@ -723,7 +802,7 @@ WavesEffect.onTouchEnd = (e) => {
 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
@@ -739,7 +818,7 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
                     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);
             },
         };
     };
@@ -751,6 +830,54 @@ const FlatButton = ButtonFactory('a', 'waves-effect waves-teal btn-flat', 'butto
 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
@@ -1142,81 +1269,6 @@ const Carousel = () => {
     };
 };
 
-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: [],
@@ -1635,7 +1687,7 @@ const avatarIsImage = (avatar = '') => /\./.test(avatar);
 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 === CollectionMode.AVATAR
                 ? m('li.collection-item.avatar', {
                     className: active ? 'active' : '',
@@ -1645,12 +1697,21 @@ const ListItem = () => {
                         ? 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);
         },
     };
 };
@@ -10751,12 +10812,12 @@ const Rating = () => {
     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' : '',
@@ -10777,6 +10838,8 @@ const Rating = () => {
                             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),
                 ]);
             },
         };
@@ -10848,6 +10911,7 @@ const Rating = () => {
                 }, 
                 // 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}`,
@@ -10857,6 +10921,8 @@ const Rating = () => {
                         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),
                     });
@@ -10872,6 +10938,237 @@ const Rating = () => {
     };
 };
 
+/** 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.
  *
@@ -11189,4 +11486,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnalogClock, AnchorItem, Autocomplete, Badge, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CircularProgress, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, LinearProgress, 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, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };
+export { AnalogClock, AnchorItem, Autocomplete, Badge, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CircularProgress, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, ConfirmButton, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, LikertScale, LinearProgress, 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, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };