mithril-materialized 3.11.0 → 3.13.0

package/dist/index.esm.js

@@ -1635,7 +1635,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 +1645,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 +10760,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 +10786,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 +10859,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 +10869,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 +10886,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 +11434,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, 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 };

package/dist/index.js

@@ -1637,7 +1637,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 === exports.CollectionMode.AVATAR
                 ? m('li.collection-item.avatar', {
                     className: active ? 'active' : '',
@@ -1647,12 +1647,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);
         },
     };
 };
@@ -10753,12 +10762,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' : '',
@@ -10779,6 +10788,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),
                 ]);
             },
         };
@@ -10850,6 +10861,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}`,
@@ -10859,6 +10871,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),
                     });
@@ -10874,6 +10888,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.
  *
@@ -11225,6 +11470,7 @@ exports.ImageList = ImageList;
 exports.InputCheckbox = InputCheckbox;
 exports.Label = Label;
 exports.LargeButton = LargeButton;
+exports.LikertScale = LikertScale;
 exports.LinearProgress = LinearProgress;
 exports.ListItem = ListItem;
 exports.Mandatory = Mandatory;