mithril-materialized 3.16.0 → 3.17.1

package/dist/index.esm.js

@@ -34,6 +34,35 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+// import './styles/input.css';
+const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
+/** Simple label element, used for most components. */
+const Label = () => {
+    return {
+        view: (_a) => {
+            var _b = _a.attrs, { label, id, isMandatory, isActive, className, initialValue } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className", "initialValue"]);
+            return label
+                ? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id, oncreate: ({ dom }) => {
+                        if (!initialValue)
+                            return;
+                        const labelEl = dom;
+                        labelEl.classList.add('active');
+                    } }), [m.trust(label), isMandatory ? m(Mandatory) : undefined])
+                : undefined;
+        },
+    };
+};
+/** Create a helper text, often used for displaying a small help text. May be replaced by the validation message. */
+const HelperText = () => {
+    return {
+        view: ({ attrs: { helperText, dataError, dataSuccess, className } }) => {
+            return helperText || dataError || dataSuccess
+                ? m('span.helper-text.left', { className, 'data-error': dataError, 'data-success': dataSuccess }, dataError ? m.trust(dataError) : dataSuccess ? m.trust(dataSuccess) : helperText ? m.trust(helperText) : '')
+                : undefined;
+        },
+    };
+};
+
 // Utility functions for the library
 /**
  * Create a unique ID
@@ -94,6 +123,42 @@ const sortOptions = (options, sortConfig) => {
  * @returns
  */
 const padLeft = (n, width = 2, z = '0') => String(n).padStart(width, z);
+const normalizeSelection = (value) => {
+    if (value === undefined) {
+        return [];
+    }
+    return Array.isArray(value) ? value : [value];
+};
+const resolveControllableValue = ({ controlled, disabled, controlledValue, defaultValue, internalValue, fallbackValue, }) => {
+    var _a, _b;
+    if (controlled) {
+        return controlledValue !== null && controlledValue !== void 0 ? controlledValue : fallbackValue;
+    }
+    if (disabled) {
+        return (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : controlledValue) !== null && _a !== void 0 ? _a : fallbackValue;
+    }
+    return (_b = internalValue !== null && internalValue !== void 0 ? internalValue : defaultValue) !== null && _b !== void 0 ? _b : fallbackValue;
+};
+const renderFieldChrome = ({ label, id, isMandatory, isActive, initialValue, helperText, dataError, dataSuccess, }) => {
+    return [
+        label
+            ? m(Label, {
+                label,
+                id,
+                isMandatory,
+                isActive,
+                initialValue,
+            })
+            : undefined,
+        helperText || dataError || dataSuccess
+            ? m(HelperText, {
+                helperText,
+                dataError,
+                dataSuccess,
+            })
+            : undefined,
+    ].filter(Boolean);
+};
 // Keep only essential dropdown positioning styles
 const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = false) => {
     if (!inputRef) {
@@ -125,8 +190,10 @@ const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = fals
                 groups.add(option.group);
             }
         });
-        // Calculate total height: options + group headers + padding
-        estimatedHeight = totalOptions * itemHeight + groups.size * groupHeaderHeight;
+        // Match the select dropdown's CSS max-height. Positioning with the full
+        // option count would otherwise leave a gap above an input near the bottom
+        // of the viewport when the rendered menu is capped at 400px.
+        estimatedHeight = Math.min(totalOptions * itemHeight + groups.size * groupHeaderHeight, 400);
     }
     const spaceBelow = viewportHeight - rect.bottom;
     const spaceAbove = rect.top;
@@ -142,33 +209,26 @@ const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = fals
     const needsScrolling = estimatedHeight > effectiveAvailableSpace;
     // Calculate the actual height the dropdown will take
     const actualHeight = needsScrolling ? effectiveAvailableSpace : estimatedHeight;
-    // Calculate positioning when dropdown should appear above
-    let topOffset;
-    if (shouldPositionAbove) {
-        // Calculate how much space we actually have from top of viewport to top of input
-        const availableSpaceFromViewportTop = rect.top;
-        // If dropdown fits comfortably above input, use normal positioning
-        if (actualHeight <= availableSpaceFromViewportTop) {
-            topOffset = 12 - actualHeight + (isDropDown ? itemHeight : 0); // Bottom of dropdown aligns with top of input
-        }
-        else {
-            // If dropdown is too tall, position it at the very top of viewport
-            // This makes the dropdown use all available space from viewport top to input top
-            topOffset = -availableSpaceFromViewportTop + 5; // 5px margin from viewport top
-        }
-    }
-    else {
-        topOffset = overlap ? 0 : '100%';
-    }
     const styles = {
         display: 'block',
         opacity: 1,
         position: 'absolute',
-        top: typeof topOffset === 'number' ? `${topOffset}px` : topOffset,
         left: '0',
         zIndex: 1000,
         width: `${rect.width}px`,
     };
+    if (shouldPositionAbove) {
+        // This menu is absolutely positioned inside the select wrapper. A negative
+        // `top` calculated from viewport coordinates becomes wrong when an ancestor
+        // scrolls (as ScenarioSpark's main area does). Anchor the menu to its local
+        // containing block instead; its height can then change without detaching it
+        // from the input.
+        styles.top = 'auto';
+        styles.bottom = `${isDropDown ? -18 : inputRef.offsetHeight - 12}px`;
+    }
+    else {
+        styles.top = overlap ? 0 : '100%';
+    }
     // Only add scrolling constraints when necessary
     if (needsScrolling) {
         styles.maxHeight = `${actualHeight}px`;
@@ -235,9 +295,17 @@ const releasePortalContainer = (id) => {
  * @param zIndex - Z-index for portal container (default: 1004)
  */
 const renderToPortal = (containerId, vnode, zIndex = 1004) => {
-    const container = getPortalContainer(containerId, zIndex);
+    const existingContainer = portalContainers.get(containerId);
+    const container = existingContainer ? existingContainer.element : getPortalContainer(containerId, zIndex);
     m.render(container, vnode);
 };
+const syncPortalContent = ({ containerId, shouldRender, vnode, zIndex = 1004 }) => {
+    if (!shouldRender || vnode === null) {
+        clearPortal(containerId);
+        return;
+    }
+    renderToPortal(containerId, vnode, zIndex);
+};
 /**
  * Clears portal content and releases container reference.
  * If this is the last reference, the container will be removed from the DOM.
@@ -252,35 +320,6 @@ const clearPortal = (containerId) => {
     }
 };
 
-// import './styles/input.css';
-const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
-/** Simple label element, used for most components. */
-const Label = () => {
-    return {
-        view: (_a) => {
-            var _b = _a.attrs, { label, id, isMandatory, isActive, className, initialValue } = _b, params = __rest(_b, ["label", "id", "isMandatory", "isActive", "className", "initialValue"]);
-            return label
-                ? m('label', Object.assign(Object.assign({}, params), { className: [className, isActive ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined, for: id, oncreate: ({ dom }) => {
-                        if (!initialValue)
-                            return;
-                        const labelEl = dom;
-                        labelEl.classList.add('active');
-                    } }), [m.trust(label), isMandatory ? m(Mandatory) : undefined])
-                : undefined;
-        },
-    };
-};
-/** Create a helper text, often used for displaying a small help text. May be replaced by the validation message. */
-const HelperText = () => {
-    return {
-        view: ({ attrs: { helperText, dataError, dataSuccess, className } }) => {
-            return helperText || dataError || dataSuccess
-                ? m('span.helper-text.left', { className, 'data-error': dataError, 'data-success': dataSuccess }, dataError ? m.trust(dataError) : dataSuccess ? m.trust(dataSuccess) : helperText ? m.trust(helperText) : '')
-                : undefined;
-        },
-    };
-};
-
 /** Component to auto complete your text input - Pure Mithril implementation */
 const Autocomplete = () => {
     const state = {
@@ -303,6 +342,28 @@ const Autocomplete = () => {
             .slice(0, limit);
         return filtered;
     };
+    const highlightMatch = (text, query) => {
+        if (!query) {
+            return text;
+        }
+        const lowerText = text.toLowerCase();
+        const lowerQuery = query.toLowerCase();
+        const nodes = [];
+        let start = 0;
+        let index = lowerText.indexOf(lowerQuery, start);
+        while (index !== -1) {
+            if (index > start) {
+                nodes.push(text.slice(start, index));
+            }
+            nodes.push(m('span.highlight', text.slice(index, index + query.length)));
+            start = index + query.length;
+            index = lowerText.indexOf(lowerQuery, start);
+        }
+        if (start < text.length) {
+            nodes.push(text.slice(start));
+        }
+        return nodes.length > 0 ? nodes : text;
+    };
     const selectSuggestion = (suggestion, attrs) => {
         const controlled = isControlled(attrs);
         // Update internal state for uncontrolled mode
@@ -408,7 +469,6 @@ const Autocomplete = () => {
                 Object.keys(data).some((key) => key.toLowerCase() === currentValue.toLowerCase());
             // Only open dropdown if there are suggestions and no perfect match
             state.isOpen = state.suggestions.length > 0 && currentValue.length >= minLength && !hasExactMatch;
-            const replacer = new RegExp(`(${currentValue})`, 'i');
             return m('.input-field.autocomplete-wrapper', {
                 className: cn,
                 style,
@@ -489,9 +549,7 @@ const Autocomplete = () => {
                                     },
                                 }, suggestion.value.replace('icon:', ''))
                                 : null,
-                        m('span', suggestion.key
-                            ? m.trust(suggestion.key.replace(replacer, (i) => `<span class="highlight">${i}</span>`))
-                            : ''),
+                        m('span', suggestion.key ? highlightMatch(suggestion.key, currentValue) : ''),
                     ]))),
                 m(Label, {
                     label,
@@ -718,7 +776,7 @@ WavesEffect.onTouchEnd = (e) => {
 /**
  * A factory to create new buttons.
  *
- * @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
+ * @example FlatButton = ButtonFactory('button.waves-effect.waves-teal.btn-flat');
  */
 const ButtonFactory = (element, defaultClassNames, type = '') => {
     return () => {
@@ -741,15 +799,21 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
                         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 !== undefined ? iconClass : 'left' }) : undefined, label ? label : undefined, children);
+                const tagName = element.split(/[.#]/)[0] || element;
+                const elementSuffix = element.slice(tagName.length);
+                const isLink = Boolean(attrs.href);
+                const renderedElement = `${isLink ? 'a' : 'button'}${elementSuffix}`;
+                return m(renderedElement, Object.assign(Object.assign(Object.assign({}, params), wavesHandlers), { className: cn, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, 
+                    // Links retain native navigation semantics and must not have a button type.
+                    type: isLink ? undefined : buttonType }), iconName ? m(Icon, { iconName, className: iconClass !== undefined ? iconClass : 'left' }) : undefined, label ? label : undefined, children);
             },
         };
     };
 };
-const Button = ButtonFactory('a', 'waves-effect waves-light btn', 'button');
-const LargeButton = ButtonFactory('a', 'waves-effect waves-light btn-large', 'button');
-const SmallButton = ButtonFactory('a', 'waves-effect waves-light btn-small', 'button');
-const FlatButton = ButtonFactory('a', 'waves-effect waves-teal btn-flat', 'button');
+const Button = ButtonFactory('button', 'waves-effect waves-light btn', 'button');
+const LargeButton = ButtonFactory('button', 'waves-effect waves-light btn-large', 'button');
+const SmallButton = ButtonFactory('button', 'waves-effect waves-light btn-small', 'button');
+const FlatButton = ButtonFactory('button', 'waves-effect waves-teal btn-flat', 'button');
 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');
@@ -806,7 +870,7 @@ const ConfirmButton = () => {
             // Add square styling for icon-only confirming state
             const buttonStyle = !label && isConfirming
                 ? Object.assign(Object.assign({}, props.style), { width: '36px', height: '36px', padding: '0', minWidth: '28px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: '2px' }) : props.style;
-            return m(ButtonComponent, Object.assign(Object.assign({}, props), { style: buttonStyle, className: `${props.className || ''} ${cn}`, iconName: currentIconName, iconClass: label ? (iconClass || 'left') : '', label, onclick: handleClick }));
+            return m(ButtonComponent, Object.assign(Object.assign({}, props), { style: buttonStyle, className: `${props.className || ''} ${cn}`, iconName: currentIconName, iconClass: label ? iconClass || 'left' : '', label, onclick: handleClick }));
         },
     };
 };
@@ -1273,11 +1337,19 @@ const MaterialIcon = () => {
             };
             const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
             const transform = rotation ? `rotate(${rotation}deg)` : undefined;
+            const baseStyle = {
+                display: 'inline-block',
+                verticalAlign: 'middle',
+                transform,
+            };
+            const combinedStyle = typeof style === 'string'
+                ? `display:inline-block;vertical-align:middle;${transform ? `transform:${transform};` : ''}${style}`
+                : Object.assign(Object.assign({}, baseStyle), style);
             const icon = iconPaths[name];
             if (!icon || !Array.isArray(icon)) {
                 return m(Icon, Object.assign(Object.assign({}, props), { iconName: name }));
             }
-            return m('svg', Object.assign(Object.assign({}, props), { style: Object.assign({ display: 'inline-block', verticalAlign: 'middle', transform }, style), height: '24px', width: '24px', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), icon === null || icon === void 0 ? void 0 : icon.map((d) => m('path', {
+            return m('svg', Object.assign(Object.assign({}, props), { style: combinedStyle, height: '24px', width: '24px', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }), icon === null || icon === void 0 ? void 0 : icon.map((d) => m('path', {
                 d,
                 fill: d.includes('M0 0h24v24H0z') ? 'none' : 'currentColor',
             })));
@@ -1676,6 +1748,106 @@ const Collapsible = () => {
     };
 };
 
+const isHandledKey = (key) => key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === ' ' || key === 'Escape';
+const getTotalRows = (optionCount, includeActionRow) => Math.max(0, optionCount) + (includeActionRow ? 1 : 0);
+const getComboboxKeyResult = ({ key, isOpen, focusedIndex, optionCount, includeActionRow, }) => {
+    const totalRows = getTotalRows(optionCount, includeActionRow);
+    if (!isHandledKey(key)) {
+        return { isOpen, focusedIndex, action: 'none', preventDefault: false };
+    }
+    if (key === 'Escape') {
+        return { isOpen: false, focusedIndex: -1, action: 'close', preventDefault: true };
+    }
+    if (key === 'ArrowDown') {
+        if (!isOpen) {
+            return {
+                isOpen: true,
+                focusedIndex: totalRows > 0 ? 0 : -1,
+                action: 'open',
+                preventDefault: true,
+            };
+        }
+        return {
+            isOpen: true,
+            focusedIndex: totalRows > 0 ? Math.min(focusedIndex + 1, totalRows - 1) : -1,
+            action: 'none',
+            preventDefault: true,
+        };
+    }
+    if (key === 'ArrowUp') {
+        if (!isOpen) {
+            return {
+                isOpen: true,
+                focusedIndex: totalRows > 0 ? 0 : -1,
+                action: 'open',
+                preventDefault: true,
+            };
+        }
+        return {
+            isOpen: true,
+            focusedIndex: totalRows > 0 ? Math.max(focusedIndex - 1, 0) : -1,
+            action: 'none',
+            preventDefault: true,
+        };
+    }
+    if (!isOpen) {
+        return {
+            isOpen: true,
+            focusedIndex: totalRows > 0 ? 0 : -1,
+            action: 'open',
+            preventDefault: true,
+        };
+    }
+    if (focusedIndex < 0) {
+        return { isOpen, focusedIndex, action: 'none', preventDefault: true };
+    }
+    const isActionRow = includeActionRow && focusedIndex === optionCount;
+    return {
+        isOpen,
+        focusedIndex,
+        action: isActionRow ? 'selectAction' : 'selectFocused',
+        preventDefault: true,
+    };
+};
+const getComboboxOptionId = (baseId, optionIndex) => `${baseId}-option-${optionIndex}`;
+const createAsyncComboboxState = (initialOptions = []) => ({
+    options: initialOptions,
+    isLoading: false,
+    error: null,
+    latestRequestId: 0,
+});
+const startAsyncComboboxRequest = (state) => {
+    const requestId = state.latestRequestId + 1;
+    return {
+        requestId,
+        nextState: Object.assign(Object.assign({}, state), { isLoading: true, error: null, latestRequestId: requestId }),
+    };
+};
+const resolveAsyncComboboxRequest = (state, requestId, options) => {
+    if (requestId !== state.latestRequestId) {
+        return state;
+    }
+    return Object.assign(Object.assign({}, state), { options, isLoading: false, error: null });
+};
+const rejectAsyncComboboxRequest = (state, requestId, errorMessage) => {
+    if (requestId !== state.latestRequestId) {
+        return state;
+    }
+    return Object.assign(Object.assign({}, state), { options: [], isLoading: false, error: errorMessage });
+};
+const getComboboxViewState = ({ isLoading, error, optionCount, }) => {
+    if (isLoading) {
+        return 'loading';
+    }
+    if (error) {
+        return 'error';
+    }
+    if (optionCount === 0) {
+        return 'empty';
+    }
+    return 'ready';
+};
+
 var CollectionMode;
 (function (CollectionMode) {
     CollectionMode[CollectionMode["BASIC"] = 0] = "BASIC";
@@ -3285,6 +3457,10 @@ const DoubleRangeSlider = {
     },
 };
 
+const isReadonly = (attrs) => {
+    const legacyReadonly = attrs.readonly;
+    return Boolean(attrs.readOnly || legacyReadonly);
+};
 /** Character counter component that tracks text length against maxLength */
 const CharacterCounter = () => {
     return {
@@ -3363,7 +3539,7 @@ const TextArea = () => {
     return {
         oninit: ({ attrs }) => {
             const controlled = isControlled(attrs);
-            const isNonInteractive = attrs.readonly || attrs.disabled;
+            const isNonInteractive = isReadonly(attrs) || attrs.disabled;
             // Warn developer for improper controlled usage
             if (attrs.value !== undefined && !controlled && !isNonInteractive) {
                 console.warn(`TextArea received 'value' prop without 'oninput' or 'onchange' handler. ` +
@@ -3380,7 +3556,7 @@ const TextArea = () => {
             var _a, _b, _c, _d;
             const { className = 'col s12', helperText, iconName, id = state.id, value, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "value", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
             const controlled = isControlled(attrs);
-            const isNonInteractive = attrs.readonly || attrs.disabled;
+            const isNonInteractive = isReadonly(attrs) || attrs.disabled;
             let currentValue;
             if (controlled) {
                 currentValue = value || '';
@@ -3496,14 +3672,12 @@ const TextArea = () => {
                                 onkeypress(ev, ev.target.value);
                             }
                             : undefined })),
-                    m(Label, {
+                    ...renderFieldChrome({
                         label,
                         id,
                         isMandatory,
                         isActive: currentValue || placeholder || state.active,
                         initialValue: currentValue !== '',
-                    }),
-                    m(HelperText, {
                         helperText,
                         dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
                         dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
@@ -3583,7 +3757,7 @@ const InputField = (type, defaultClass = '') => () => {
     return {
         oninit: ({ attrs }) => {
             const controlled = isControlled(attrs);
-            const isNonInteractive = attrs.readonly || attrs.disabled;
+            const isNonInteractive = isReadonly(attrs) || attrs.disabled;
             // Warn developer for improper controlled usage
             if (attrs.value !== undefined && !controlled && !isNonInteractive) {
                 console.warn(`${type} input with label '${attrs.label}' received 'value' prop without 'oninput' handler. ` +
@@ -3623,7 +3797,7 @@ const InputField = (type, defaultClass = '') => () => {
             }
             const isNumeric = ['number', 'range'].includes(type);
             const controlled = isControlled(attrs);
-            const isNonInteractive = attrs.readonly || attrs.disabled;
+            const isNonInteractive = isReadonly(attrs) || attrs.disabled;
             let value;
             if (controlled) {
                 value = attrs.value;
@@ -3642,9 +3816,28 @@ const InputField = (type, defaultClass = '') => () => {
             const rangeType = type === 'range' && !attrs.minmax;
             // Only add validate class if input is interactive and validation is needed
             const shouldValidate = !isNonInteractive && (validate || type === 'email' || type === 'url' || isNumeric);
+            const inputClass = [
+                type === 'number' ? 'number-input' : '',
+                type === 'range' && attrs.vertical ? 'range-slider vertical' : '',
+                shouldValidate ? 'validate' : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const stepNumberInput = (direction) => {
+                const input = state.inputElement;
+                if (!input)
+                    return;
+                if (direction === 'up') {
+                    input.stepUp();
+                }
+                else {
+                    input.stepDown();
+                }
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            };
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                m('input', Object.assign(Object.assign({ class: type === 'range' && attrs.vertical ? 'range-slider vertical' : shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
+                m('input', Object.assign(Object.assign({ class: inputClass || undefined }, params), { type, tabindex: 0, id,
                     placeholder, value: controlled ? value : undefined, style: type === 'range' && attrs.vertical
                         ? {
                             height: attrs.height || '200px',
@@ -3726,7 +3919,7 @@ const InputField = (type, defaultClass = '') => () => {
                         const target = e.target;
                         state.hasInteracted = true;
                         // Skip validation for readonly/disabled inputs
-                        if (attrs.readonly || attrs.disabled) {
+                        if (isReadonly(attrs) || attrs.disabled) {
                             // Call original onblur if provided
                             if (attrs.onblur) {
                                 attrs.onblur(e);
@@ -3816,6 +4009,22 @@ const InputField = (type, defaultClass = '') => () => {
                             onchange(getValue(state.inputElement));
                         }
                     } })),
+                type === 'number' && !isNonInteractive
+                    ? m('.number-input-controls', [
+                        m('button.number-input-control.number-input-control-up[type=button]', {
+                            'aria-label': `Increase ${label || 'value'}`,
+                            title: 'Increase value',
+                            onmousedown: (event) => event.preventDefault(),
+                            onclick: () => stepNumberInput('up'),
+                        }, m(MaterialIcon, { name: 'chevron', direction: 'up' })),
+                        m('button.number-input-control.number-input-control-down[type=button]', {
+                            'aria-label': `Decrease ${label || 'value'}`,
+                            title: 'Decrease value',
+                            onmousedown: (event) => event.preventDefault(),
+                            onclick: () => stepNumberInput('down'),
+                        }, m(MaterialIcon, { name: 'chevron' })),
+                    ])
+                    : undefined,
                 // Clear button - only for text inputs with canClear enabled and has content
                 canClear && type === 'text' && ((_f = state.inputElement) === null || _f === void 0 ? void 0 : _f.value)
                     ? m(MaterialIcon, {
@@ -3828,14 +4037,12 @@ const InputField = (type, defaultClass = '') => () => {
                         },
                     })
                     : undefined,
-                m(Label, {
+                ...renderFieldChrome({
                     label,
                     id,
                     isMandatory,
                     isActive,
                     initialValue: value !== undefined && value !== '',
-                }),
-                m(HelperText, {
                     helperText,
                     dataError: state.hasInteracted && !state.isValid ? dataError : undefined,
                     dataSuccess: state.hasInteracted && state.isValid ? dataSuccess : undefined,
@@ -3935,7 +4142,7 @@ const InputCheckbox = () => {
         view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
             if (!checkboxId)
                 checkboxId = inputId || uniqueId();
-            return m('div', { className, style }, m('label', { for: checkboxId }, [
+            return m('div', { className, style }, m('label', { for: checkboxId, style: { position: 'relative', display: 'inline-block' } }, [
                 m('input[type=checkbox][tabindex=0]', {
                     className: disabled ? 'disabled' : undefined,
                     id: checkboxId,
@@ -4700,17 +4907,6 @@ const Dropdown = () => {
     const updatePortalDropdown = (items, selectedLabel, onSelectItem, maxHeight) => {
         if (!state.isInsideModal)
             return;
-        // Clean up existing portal
-        const existingPortal = document.getElementById(`${state.id}-dropdown`);
-        if (existingPortal) {
-            existingPortal.remove();
-        }
-        if (!state.isOpen || !state.inputRef)
-            return;
-        // Create portal element
-        const portalElement = document.createElement('div');
-        portalElement.id = `${state.id}-dropdown`;
-        document.body.appendChild(portalElement);
         // Create dropdown content
         const availableItems = items.filter((item) => !item.divider && !item.disabled);
         const dropdownContent = items.map((item) => {
@@ -4724,15 +4920,14 @@ const Dropdown = () => {
                 class: `${isSelected ? 'selected' : ''} ${isFocused ? 'focused' : ''}${item.disabled ? ' disabled' : ''}`,
                 onclick: item.disabled ? undefined : () => onSelectItem(item),
             }, m('span', {
+                class: 'mm-layout-row mm-layout-row--center',
                 style: {
-                    display: 'flex',
-                    alignItems: 'center',
                     padding: '14px 16px',
                 },
             }, [
                 item.iconName
                     ? m('i.material-icons', {
-                        style: { marginRight: '32px' },
+                        class: 'mm-layout-item-icon',
                     }, item.iconName)
                     : undefined,
                 item.label,
@@ -4749,8 +4944,12 @@ const Dropdown = () => {
                 state.dropdownRef = null;
             },
         }, dropdownContent);
-        // Render to portal
-        m.render(portalElement, dropdownVnode);
+        syncPortalContent({
+            containerId: `${state.id}-dropdown`,
+            shouldRender: state.isOpen && !!state.inputRef,
+            vnode: dropdownVnode,
+            zIndex: 10000,
+        });
     };
     return {
         oninit: ({ attrs }) => {
@@ -4771,15 +4970,19 @@ const Dropdown = () => {
             // Cleanup global listener
             document.removeEventListener('click', closeDropdown);
             // Cleanup portal
-            const portalElement = document.getElementById(`${state.id}-dropdown`);
-            if (portalElement) {
-                portalElement.remove();
-            }
+            syncPortalContent({ containerId: `${state.id}-dropdown`, shouldRender: false, vnode: null });
         },
         view: ({ attrs }) => {
             const { checkedId, key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12', } = attrs;
             const controlled = isControlled(attrs);
-            const currentCheckedId = controlled ? checkedId : state.internalCheckedId;
+            const currentCheckedId = resolveControllableValue({
+                controlled,
+                disabled,
+                controlledValue: checkedId,
+                defaultValue: attrs.defaultCheckedId,
+                internalValue: state.internalCheckedId,
+                fallbackValue: undefined,
+            });
             const handleSelection = (value) => {
                 // Update internal state for uncontrolled mode
                 if (!controlled) {
@@ -4811,6 +5014,7 @@ const Dropdown = () => {
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
                 m(HelperText, { helperText }),
                 m('.select-wrapper', {
+                    class: 'mm-layout-row mm-layout-row--center',
                     onkeydown: disabled
                         ? undefined
                         : (e) => {
@@ -4878,15 +5082,14 @@ const Dropdown = () => {
                                         handleSelection(value);
                                     },
                             }, m('span', {
+                                class: 'mm-layout-row mm-layout-row--center',
                                 style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
                                     padding: '14px 16px',
                                 },
                             }, [
                                 item.iconName
                                     ? m('i.material-icons', {
-                                        style: { marginRight: '32px' },
+                                        class: 'mm-layout-item-icon',
                                     }, item.iconName)
                                     : undefined,
                                 item.label,
@@ -6843,9 +7046,9 @@ const initPushpins = (selector = '.pushpin', options = {}) => {
 };
 
 const RadioButton = () => ({
-    view: ({ attrs: { id, groupId, label, onchange, className = 'col s12', checked, disabled, inputId } }) => {
+    view: ({ attrs: { id, groupId, label, onchange, className = 'col s12', checked, disabled, inputId, allowHtml } }) => {
         const radioId = inputId || `${groupId}-${id}`;
-        return m('p', { className }, m('label', { for: radioId }, [
+        return m('p', { className }, m('label', { for: radioId, style: { position: 'relative', display: 'inline-block' } }, [
             m('input[type=radio][tabindex=0]', {
                 id: radioId,
                 name: groupId,
@@ -6853,7 +7056,7 @@ const RadioButton = () => ({
                 checked,
                 onclick: onchange ? () => onchange(id) : undefined,
             }),
-            m('span', m.trust(label)),
+            m('span', allowHtml ? m.trust(label) : label),
         ]));
     },
 });
@@ -6880,8 +7083,9 @@ const RadioButtons = () => {
             }
         },
         view: ({ attrs }) => {
-            var _a, _b;
-            const { checkedId, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout = 'vertical', onchange, } = attrs;
+            var _a, _b, _c;
+            const { checkedId, newRow, className = 'col s12', label = '', disabled, description, options, isMandatory, checkboxClass, layout, direction, allowHtml = false, onchange, } = attrs;
+            const resolvedLayout = (_a = layout !== null && layout !== void 0 ? layout : direction) !== null && _a !== void 0 ? _a : 'vertical';
             const { groupId, componentId } = state;
             const controlled = isControlled(attrs);
             // Get current checked ID from props or internal state
@@ -6891,11 +7095,11 @@ const RadioButtons = () => {
             }
             else if (disabled) {
                 // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
-                currentCheckedId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : checkedId;
+                currentCheckedId = (_b = attrs.defaultCheckedId) !== null && _b !== void 0 ? _b : checkedId;
             }
             else {
                 // Interactive uncontrolled: use internal state
-                currentCheckedId = (_b = state.internalCheckedId) !== null && _b !== void 0 ? _b : attrs.defaultCheckedId;
+                currentCheckedId = (_c = state.internalCheckedId) !== null && _c !== void 0 ? _c : attrs.defaultCheckedId;
             }
             const handleChange = (id) => {
                 // Update internal state for uncontrolled mode
@@ -6910,16 +7114,16 @@ const RadioButtons = () => {
             const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
             const radioItems = options.map((r) => ({
                 component: (RadioButton),
-                props: Object.assign(Object.assign({}, r), { onchange: handleChange, groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === currentCheckedId, inputId: `${componentId}-${r.id}` }),
+                props: Object.assign(Object.assign({}, r), { onchange: handleChange, groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === currentCheckedId, inputId: `${componentId}-${r.id}`, allowHtml }),
                 key: r.id,
             }));
             const optionsContent = m(OptionsList, {
                 options: radioItems,
-                layout,
+                layout: resolvedLayout,
             });
             return m('div', { id: componentId, className: cn }, [
                 label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
-                description && m('p.helper-text', m.trust(description)),
+                description && m('p.helper-text', allowHtml ? m.trust(description) : description),
                 m('form', { action: '#' }, optionsContent),
             ]);
         },
@@ -7056,6 +7260,26 @@ const Select = () => {
             opacity: 1,
         };
     };
+    const formatSelectionSummary = (attrs, selectedLabels, selectedIds, placeholder) => {
+        const mode = attrs.summaryMode || 'labels';
+        const selectedCount = selectedIds.length;
+        const totalCount = attrs.options.filter((option) => !option.disabled).length;
+        if (mode === 'labels') {
+            return selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholder;
+        }
+        const defaultCountLabel = `${selectedCount}/${totalCount} selected`;
+        const formattedCount = attrs.countLabel ? attrs.countLabel(selectedCount, totalCount) : defaultCountLabel;
+        if (mode === 'count') {
+            return selectedCount > 0 ? formattedCount : placeholder;
+        }
+        if (selectedCount === 0) {
+            return attrs.noneSelectedLabel || placeholder;
+        }
+        if (totalCount > 0 && selectedCount >= totalCount) {
+            return attrs.allSelectedLabel || 'All selected';
+        }
+        return formattedCount;
+    };
     const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
         placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
         // Render ungrouped options first
@@ -7124,17 +7348,6 @@ const Select = () => {
     const updatePortalDropdown = (attrs, selectedIds, multiple, placeholder) => {
         if (!state.isInsideModal)
             return;
-        // Clean up existing portal
-        const existingPortal = document.getElementById(state.dropdownId);
-        if (existingPortal) {
-            existingPortal.remove();
-        }
-        if (!state.isOpen || !state.inputRef)
-            return;
-        // Create portal element
-        const portalElement = document.createElement('div');
-        portalElement.id = state.dropdownId;
-        document.body.appendChild(portalElement);
         // Create dropdown with proper positioning
         const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
             tabindex: 0,
@@ -7146,8 +7359,12 @@ const Select = () => {
                 state.dropdownRef = null;
             },
         }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
-        // Render to portal
-        m.render(portalElement, dropdownVnode);
+        syncPortalContent({
+            containerId: state.dropdownId,
+            shouldRender: state.isOpen && !!state.inputRef,
+            vnode: dropdownVnode,
+            zIndex: 10000,
+        });
     };
     return {
         oninit: ({ attrs }) => {
@@ -7180,35 +7397,30 @@ const Select = () => {
             document.removeEventListener('click', closeDropdown);
             // Cleanup portaled dropdown if it exists
             if (state.isInsideModal && state.dropdownRef) {
-                const portalElement = document.getElementById(state.dropdownId);
-                if (portalElement && portalElement.parentNode) {
-                    portalElement.parentNode.removeChild(portalElement);
-                }
+                syncPortalContent({ containerId: state.dropdownId, shouldRender: false, vnode: null });
             }
         },
         view: ({ attrs }) => {
-            var _a;
             const controlled = isControlled(attrs);
-            const { newRow, className = 'col s12', key, options = [], multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, disabled, } = attrs;
+            const { newRow, className = 'col s12', key, options = [], multiple = false, label, helperText, placeholder = '', isMandatory, iconName, appearance = 'standard', style, disabled, } = attrs;
             state.isMultiple = multiple;
             // Get selected IDs from props or internal state
-            let selectedIds;
-            if (controlled) {
-                selectedIds =
-                    attrs.checkedId !== undefined ? (Array.isArray(attrs.checkedId) ? attrs.checkedId : [attrs.checkedId]) : [];
-            }
-            else if (disabled) {
-                // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
-                const fallbackId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : attrs.checkedId;
-                selectedIds = fallbackId !== undefined ? (Array.isArray(fallbackId) ? fallbackId : [fallbackId]) : [];
-            }
-            else {
-                // Interactive uncontrolled: use internal state
-                selectedIds = state.internalSelectedIds;
-            }
-            const finalClassName = newRow ? `${className} clear` : className;
+            const selectedIds = resolveControllableValue({
+                controlled,
+                disabled,
+                controlledValue: normalizeSelection(attrs.checkedId),
+                defaultValue: normalizeSelection(attrs.defaultCheckedId),
+                internalValue: state.internalSelectedIds,
+                fallbackValue: [],
+            });
+            const layoutClassName = newRow ? `${className} clear` : className;
+            const appearanceClassName = appearance === 'outlined' ? 'select-appearance-outlined' : '';
+            const finalClassName = [layoutClassName, appearanceClassName].filter(Boolean).join(' ');
+            const shouldInlineLabel = appearance === 'outlined' && !!label;
             const selectedOptionsUnsorted = options.filter((opt) => isSelected(opt.id, selectedIds));
             const selectedOptions = sortOptions(selectedOptionsUnsorted, attrs.sortSelected);
+            const selectedLabels = selectedOptions.map((o) => o.label || o.id.toString());
+            const triggerValue = formatSelectionSummary(attrs, selectedLabels, selectedIds, placeholder);
             // Update portal dropdown when inside modal
             if (state.isInsideModal) {
                 updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
@@ -7228,9 +7440,15 @@ const Select = () => {
                     'aria-controls': state.dropdownId,
                     role: 'combobox',
                 }, [
+                    shouldInlineLabel &&
+                        m('span.select-inline-label', [
+                            label,
+                            isMandatory && m('span.mandatory', { style: { marginLeft: '2px' } }, '*'),
+                        ]),
                     m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
                         id: state.id,
-                        value: selectedOptions.length > 0 ? selectedOptions.map((o) => o.label || o.id).join(', ') : placeholder,
+                        value: triggerValue,
+                        'aria-label': label,
                         oncreate: ({ dom }) => {
                             state.inputRef = dom;
                         },
@@ -7262,14 +7480,12 @@ const Select = () => {
                     }),
                 ]),
                 // Label
-                label &&
-                    m(Label, {
-                        id: state.id,
-                        label,
-                        isMandatory,
-                    }),
-                // Helper text
-                helperText && m(HelperText, { helperText }),
+                ...renderFieldChrome({
+                    label: shouldInlineLabel ? undefined : label,
+                    id: state.id,
+                    isMandatory,
+                    helperText,
+                }),
             ]);
         },
     };
@@ -7488,59 +7704,65 @@ const Tabs = () => {
     };
 };
 
-// Proper components to avoid anonymous closures
-const SelectedChip = () => {
-    return {
-        view: ({ attrs: { option, onRemove } }) => m('.chip', [
-            option.label || option.id.toString(),
-            m(MaterialIcon, {
-                name: 'close',
-                className: 'close',
-                onclick: (e) => {
-                    e.stopPropagation();
-                    onRemove(option.id);
-                },
-            }),
-        ]),
-    };
-};
-const DropdownOption = () => {
-    return {
-        view: ({ attrs: { option, index, selectedIds, isFocused, onToggle, onMouseOver, showCheckbox } }) => {
-            const checkboxId = `search-select-option-${option.id}`;
-            const optionLabel = option.label || option.id.toString();
-            return m('li', {
-                key: option.id,
-                onclick: (e) => {
-                    e.preventDefault();
+const SelectedChip = ({ option, onRemove, }) => m('.chip', [
+    option.label || option.id.toString(),
+    m(MaterialIcon, {
+        name: 'close',
+        className: 'close',
+        onclick: (e) => {
+            e.stopPropagation();
+            onRemove(option.id);
+        },
+    }),
+]);
+const DropdownOption = ({ option, index, optionId, selectedIds, isFocused, onToggle, onMouseOver, showCheckbox, }) => {
+    const optionLabel = option.label || option.id.toString();
+    return m('li', {
+        id: optionId,
+        role: 'option',
+        'aria-selected': selectedIds.includes(option.id) ? 'true' : 'false',
+        class: `${option.disabled ? 'disabled' : ''} ${isFocused ? 'active' : ''}`.trim(),
+        onmouseover: () => {
+            if (!option.disabled) {
+                onMouseOver(index);
+            }
+        },
+    }, m('label', {
+        class: 'search-select-option-label',
+        onclick: (e) => {
+            // A single-select row has no native checkbox to emit change.
+            if (!showCheckbox) {
+                e.preventDefault();
+                onToggle(option);
+            }
+        },
+    }, [
+        showCheckbox &&
+            m('input', {
+                type: 'checkbox',
+                checked: selectedIds.includes(option.id),
+                disabled: option.disabled,
+                onchange: (e) => {
                     e.stopPropagation();
                     onToggle(option);
                 },
-                class: `${option.disabled ? 'disabled' : ''} ${isFocused ? 'active' : ''}`.trim(),
-                onmouseover: () => {
-                    if (!option.disabled) {
-                        onMouseOver(index);
-                    }
-                },
-            }, m('label', { for: checkboxId, class: 'search-select-option-label' }, [
-                showCheckbox &&
-                    m('input', {
-                        type: 'checkbox',
-                        id: checkboxId,
-                        checked: selectedIds.includes(option.id),
-                    }),
-                m('span', optionLabel),
-            ]));
-        },
-    };
+            }),
+        m('span', optionLabel),
+    ]));
 };
 /**
  * Mithril Factory Component for Multi-Select Dropdown with search
  */
-const SearchSelect = () => {
+const SearchSelect = (maybeVnode) => {
+    var _a;
+    const cachedInstance = (_a = maybeVnode === null || maybeVnode === void 0 ? void 0 : maybeVnode.state) === null || _a === void 0 ? void 0 : _a.__searchSelectInstance;
+    if (cachedInstance) {
+        return cachedInstance;
+    }
     // State initialization
     const state = {
         id: '',
+        listboxId: '',
         isOpen: false,
         searchTerm: '',
         inputRef: null,
@@ -7548,17 +7770,38 @@ const SearchSelect = () => {
         focusedIndex: -1,
         internalSelectedIds: [],
         createdOptions: [],
-    };
+        asyncOptions: [],
+        isLoading: false,
+        loadError: null,
+        latestRequestId: 0,
+    };
+    const updateAsyncState = (nextState) => {
+        state.asyncOptions = nextState.options;
+        state.isLoading = nextState.isLoading;
+        state.loadError = nextState.error;
+        state.latestRequestId = nextState.latestRequestId;
+    };
+    const readAsyncState = () => ({
+        options: state.asyncOptions,
+        isLoading: state.isLoading,
+        error: state.loadError,
+        latestRequestId: state.latestRequestId,
+    });
     const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
     const componentId = uniqueId();
     const searchInputId = `${componentId}-search`;
     // Handle click outside
     const handleClickOutside = (e) => {
         const target = e.target;
+        const targetElement = e.target instanceof Element ? e.target : null;
         if (state.dropdownRef && state.dropdownRef.contains(target)) {
             // Click inside dropdown, do nothing
             return;
         }
+        if (targetElement && targetElement.closest('.chips-container')) {
+            // Click on trigger, do nothing
+            return;
+        }
         if (state.inputRef && state.inputRef.contains(target)) {
             // Click on trigger handled by onclick event
             return;
@@ -7569,40 +7812,51 @@ const SearchSelect = () => {
         }
         m.redraw();
     };
-    // Handle keyboard navigation
-    const handleKeyDown = (e, filteredOptions, showAddNew) => {
-        if (!state.isOpen)
+    // Handle keyboard navigation through shared combobox primitive.
+    const handleKeyDown = (e, optionCount, includeActionRow) => {
+        const result = getComboboxKeyResult({
+            key: e.key,
+            isOpen: state.isOpen,
+            focusedIndex: state.focusedIndex,
+            optionCount,
+            includeActionRow,
+        });
+        if (result.preventDefault) {
+            e.preventDefault();
+        }
+        state.isOpen = result.isOpen;
+        state.focusedIndex = result.focusedIndex;
+        return result.action;
+    };
+    const loadAsyncOptions = async (attrs, query) => {
+        if (!attrs.loadOptions) {
             return;
-        const totalOptions = filteredOptions.length + (showAddNew ? 1 : 0);
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                state.focusedIndex = Math.min(state.focusedIndex + 1, totalOptions - 1);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                state.focusedIndex = Math.max(state.focusedIndex - 1, -1);
-                break;
-            case 'Enter':
-                e.preventDefault();
-                if (state.focusedIndex >= 0) {
-                    if (showAddNew && state.focusedIndex === filteredOptions.length) {
-                        // Handle add new option
-                        return 'addNew';
-                    }
-                    else if (state.focusedIndex < filteredOptions.length) {
-                        // This will be handled in the view method where attrs are available
-                        return 'selectOption';
-                    }
-                }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                state.isOpen = false;
+        }
+        const started = startAsyncComboboxRequest(readAsyncState());
+        updateAsyncState(started.nextState);
+        m.redraw();
+        try {
+            const loadedOptions = await attrs.loadOptions(query);
+            const resolved = resolveAsyncComboboxRequest(readAsyncState(), started.requestId, loadedOptions);
+            updateAsyncState(resolved);
+            if (started.requestId !== state.latestRequestId) {
+                return;
+            }
+            if (state.focusedIndex >= loadedOptions.length) {
                 state.focusedIndex = -1;
-                break;
+            }
+        }
+        catch (error) {
+            const rejected = rejectAsyncComboboxRequest(readAsyncState(), started.requestId, error instanceof Error ? error.message : 'Unable to load options');
+            updateAsyncState(rejected);
+            if (started.requestId !== state.latestRequestId) {
+                return;
+            }
+            state.focusedIndex = -1;
+        }
+        finally {
+            m.redraw();
         }
-        return null;
     };
     // Create new option and add to state
     const createAndSelectOption = async (attrs) => {
@@ -7683,9 +7937,10 @@ const SearchSelect = () => {
             attrs.onchange(newIds);
         }
     };
-    return {
+    const componentInstance = {
         oninit: ({ attrs }) => {
             state.id = attrs.id || uniqueId();
+            state.listboxId = `${state.id}-listbox`;
             // Initialize internal state for uncontrolled mode
             if (!isControlled(attrs)) {
                 const defaultIds = attrs.defaultCheckedId !== undefined
@@ -7712,20 +7967,26 @@ const SearchSelect = () => {
                         : [attrs.checkedId]
                     : []
                 : state.internalSelectedIds;
-            const { options = [], oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label, i18n = {}, maxDisplayedOptions, maxSelectedOptions, maxHeight, } = attrs;
+            const { options = [], loadOptions, oncreateNewOption, className, placeholder, searchPlaceholder = 'Search options...', noOptionsFound = 'No options found', label, i18n = {}, maxDisplayedOptions, maxSelectedOptions, maxHeight, } = attrs;
             // Use i18n values if provided, otherwise use defaults
             const texts = {
                 noOptionsFound: i18n.noOptionsFound || noOptionsFound,
+                loadingOptions: i18n.loadingOptions || 'Loading options...',
+                loadingError: i18n.loadingError || 'Unable to load options',
                 addNewPrefix: i18n.addNewPrefix || '+',
                 showingXofY: i18n.showingXofY || 'Showing {shown} of {total} options',
                 maxSelectionsReached: i18n.maxSelectionsReached || 'Maximum {max} selections reached',
             };
             // Check if max selections is reached
             const isMaxSelectionsReached = maxSelectedOptions && selectedIds.length >= maxSelectedOptions;
-            // Merge provided options with internally created options
-            const allOptions = [...options, ...state.createdOptions];
+            // In async mode, the active list is sourced remotely.
+            const sourceOptions = loadOptions ? state.asyncOptions : options;
+            // Merge active options with internally created options
+            const allOptions = [...sourceOptions, ...state.createdOptions];
+            // Keep selected label lookups stable across static, async, and created sets.
+            const lookupOptions = [...options, ...state.asyncOptions, ...state.createdOptions];
             // Get selected options for display
-            const selectedOptionsUnsorted = allOptions.filter((opt) => selectedIds.includes(opt.id));
+            const selectedOptionsUnsorted = lookupOptions.filter((opt) => selectedIds.includes(opt.id));
             const selectedOptions = sortOptions(selectedOptionsUnsorted, attrs.sortSelected);
             // Safely filter options
             const filteredOptions = allOptions.filter((option) => (option.label || option.id.toString()).toLowerCase().includes((state.searchTerm || '').toLowerCase()) &&
@@ -7738,6 +7999,14 @@ const SearchSelect = () => {
             const showAddNew = oncreateNewOption &&
                 state.searchTerm &&
                 !displayedOptions.some((o) => (o.label || o.id.toString()).toLowerCase() === state.searchTerm.toLowerCase());
+            const activeDescendantId = state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < displayedOptions.length
+                ? getComboboxOptionId(state.id, state.focusedIndex)
+                : undefined;
+            const viewState = getComboboxViewState({
+                isLoading: state.isLoading,
+                error: state.loadError,
+                optionCount: displayedOptions.length,
+            });
             // Render the dropdown
             return m('.input-field.multi-select-dropdown', { className }, [
                 m('.chips.chips-initial.chips-container', {
@@ -7748,14 +8017,34 @@ const SearchSelect = () => {
                         // console.log('SearchSelect clicked', state.isOpen, e); // Debug log
                         e.preventDefault();
                         e.stopPropagation();
+                        const wasOpen = state.isOpen;
                         state.isOpen = !state.isOpen;
+                        if (!wasOpen && state.isOpen && loadOptions) {
+                            void loadAsyncOptions(attrs, state.searchTerm);
+                        }
                         // console.log('SearchSelect state changed to', state.isOpen); // Debug log
                     },
-                    class: 'chips chips-container',
+                    onkeydown: async (e) => {
+                        const action = handleKeyDown(e, displayedOptions.length, !!showAddNew);
+                        if (action === 'open' && loadOptions) {
+                            await loadAsyncOptions(attrs, state.searchTerm);
+                            return;
+                        }
+                        if (action === 'selectAction' && oncreateNewOption) {
+                            await createAndSelectOption(attrs);
+                        }
+                        if (action === 'selectFocused' && state.focusedIndex < displayedOptions.length) {
+                            toggleOption(displayedOptions[state.focusedIndex], attrs);
+                        }
+                    },
+                    class: 'chips chips-container mm-layout-row mm-layout-row--wrap mm-layout-row--align-end',
+                    role: 'combobox',
+                    tabindex: 0,
+                    'aria-expanded': state.isOpen ? 'true' : 'false',
+                    'aria-haspopup': 'listbox',
+                    'aria-controls': state.isOpen ? state.listboxId : undefined,
+                    'aria-activedescendant': activeDescendantId,
                     style: {
-                        display: 'flex',
-                        alignItems: 'end',
-                        flexWrap: 'wrap',
                         cursor: 'pointer',
                         position: 'relative',
                     },
@@ -7768,30 +8057,41 @@ const SearchSelect = () => {
                         value: selectedOptions.map((o) => o.label || o.id.toString()).join(', '),
                         readonly: true,
                         class: 'sr-only',
-                        style: { position: 'absolute', left: '-9999px', opacity: 0 },
+                        style: {
+                            position: 'absolute',
+                            width: '1px',
+                            height: '1px',
+                            margin: '-1px',
+                            padding: 0,
+                            border: 0,
+                            overflow: 'hidden',
+                            clip: 'rect(0 0 0 0)',
+                            clipPath: 'inset(50%)',
+                            whiteSpace: 'nowrap',
+                        },
                     }),
                     // Selected Options (chips)
-                    ...selectedOptions.map((option) => m(SelectedChip(), {
-                        option,
+                    ...selectedOptions.map((option) => SelectedChip({
+                        option: option,
                         onRemove: (id) => removeOption(id, attrs),
                     })),
                     // Placeholder when no options selected
                     selectedOptions.length === 0 &&
                         placeholder &&
                         m('span.placeholder', {
+                            class: 'mm-layout-grow',
                             style: {
                                 color: 'var(--mm-text-hint, #9e9e9e)',
-                                flexGrow: 1,
                                 padding: '8px 0',
                             },
                         }, placeholder),
                     // Spacer to push caret to the right
-                    m('span.spacer', { style: { flexGrow: 1 } }),
+                    m('span.spacer.mm-layout-grow'),
                     m(MaterialIcon, {
                         name: 'caret',
                         direction: state.isOpen ? 'up' : 'down',
-                        class: 'caret',
-                        style: { marginLeft: 'auto', cursor: 'pointer' },
+                        class: 'caret mm-layout-ml-auto',
+                        style: { cursor: 'pointer' },
                     }),
                 ]),
                 // Label
@@ -7803,6 +8103,8 @@ const SearchSelect = () => {
                 // Dropdown Menu
                 state.isOpen &&
                     m('ul.dropdown-content.select-dropdown', {
+                        id: state.listboxId,
+                        role: 'listbox',
                         oncreate: ({ dom }) => {
                             state.dropdownRef = dom;
                         },
@@ -7827,23 +8129,39 @@ const SearchSelect = () => {
                                 oninput: (e) => {
                                     state.searchTerm = e.target.value;
                                     state.focusedIndex = -1; // Reset focus when typing
+                                    if (loadOptions) {
+                                        void loadAsyncOptions(attrs, state.searchTerm);
+                                    }
                                 },
                                 onkeydown: async (e) => {
-                                    const result = handleKeyDown(e, displayedOptions, !!showAddNew);
-                                    if (result === 'addNew' && oncreateNewOption) {
+                                    const action = handleKeyDown(e, displayedOptions.length, !!showAddNew);
+                                    if (action === 'open' && loadOptions) {
+                                        await loadAsyncOptions(attrs, state.searchTerm);
+                                    }
+                                    else if (action === 'selectAction' && oncreateNewOption) {
                                         await createAndSelectOption(attrs);
                                     }
-                                    else if (result === 'selectOption' && state.focusedIndex < displayedOptions.length) {
+                                    else if (action === 'selectFocused' && state.focusedIndex < displayedOptions.length) {
                                         toggleOption(displayedOptions[state.focusedIndex], attrs);
                                     }
                                 },
                                 class: 'search-select-input',
+                                'aria-autocomplete': 'list',
+                                'aria-controls': state.listboxId,
                             }),
                         ]),
-                        // No options found message or list of options
-                        ...(displayedOptions.length === 0 && !showAddNew
-                            ? [m('li.search-select-no-options', texts.noOptionsFound)]
+                        // Async loading status
+                        ...(viewState === 'loading'
+                            ? [m('li.search-select-loading-info', { role: 'status', 'aria-live': 'polite' }, texts.loadingOptions)]
+                            : []),
+                        // Async loading error
+                        ...(viewState === 'error' && state.loadError
+                            ? [
+                                m('li.search-select-error-info', { role: 'status', 'aria-live': 'assertive' }, `${texts.loadingError}: ${state.loadError}`),
+                            ]
                             : []),
+                        // No options found message or list of options
+                        ...(viewState === 'empty' && !showAddNew ? [m('li.search-select-no-options', texts.noOptionsFound)] : []),
                         // Truncation message
                         ...(isTruncated
                             ? [
@@ -7876,6 +8194,9 @@ const SearchSelect = () => {
                         ...(showAddNew
                             ? [
                                 m('li', {
+                                    id: `${state.listboxId}-action`,
+                                    role: 'option',
+                                    'aria-selected': 'false',
                                     onclick: async () => {
                                         await createAndSelectOption(attrs);
                                     },
@@ -7887,9 +8208,10 @@ const SearchSelect = () => {
                             ]
                             : []),
                         // List of filtered options
-                        ...displayedOptions.map((option, index) => m(DropdownOption(), {
+                        ...displayedOptions.map((option, index) => DropdownOption({
                             option,
                             index,
+                            optionId: getComboboxOptionId(state.id, index),
                             selectedIds,
                             isFocused: state.focusedIndex === index,
                             onToggle: (opt) => toggleOption(opt, attrs),
@@ -7902,6 +8224,10 @@ const SearchSelect = () => {
             ]);
         },
     };
+    if (maybeVnode === null || maybeVnode === void 0 ? void 0 : maybeVnode.state) {
+        maybeVnode.state.__searchSelectInstance = componentInstance;
+    }
+    return componentInstance;
 };
 
 const defaultI18n$2 = {
@@ -9275,6 +9601,53 @@ const FileUpload = () => {
     };
 };
 
+/** A semantic native fieldset for related controls. */
+const Fieldset = () => ({
+    view: ({ attrs, children }) => {
+        const { legend, description, required, disabled, error, className } = attrs, params = __rest(attrs, ["legend", "description", "required", "disabled", "error", "className"]);
+        const descriptionId = params.id ? `${params.id}-description` : undefined;
+        const errorId = params.id ? `${params.id}-error` : undefined;
+        const describedBy = [description && descriptionId, error && errorId].filter(Boolean).join(' ') || undefined;
+        return m('fieldset.mm-fieldset', Object.assign(Object.assign({}, params), { className, disabled, 'aria-describedby': describedBy }), [
+            m('legend.mm-fieldset__legend', [legend, required && m('span.mm-fieldset__required[aria-hidden=true]', ' *')]),
+            description && m('p.mm-fieldset__description', { id: descriptionId }, description),
+            children,
+            error && m('p.mm-fieldset__error[role=alert]', { id: errorId }, error),
+        ]);
+    },
+});
+const focusErrorTarget = (fieldId) => {
+    var _a;
+    if (!fieldId || typeof document === 'undefined')
+        return;
+    (_a = document.getElementById(fieldId)) === null || _a === void 0 ? void 0 : _a.focus();
+};
+/** A visual form section with an optional accessible validation summary. */
+const FormSection = () => ({
+    view: ({ attrs, children }) => {
+        const { title, description, errors = [], summaryTitle = 'Please correct the following errors', className } = attrs, params = __rest(attrs, ["title", "description", "errors", "summaryTitle", "className"]);
+        return m('section.mm-form-section', Object.assign(Object.assign({}, params), { className }), [
+            (title || description) &&
+                m('.mm-form-section__header', [
+                    title && m('h3.mm-form-section__title', title),
+                    description && m('p.mm-form-section__description', description),
+                ]),
+            errors.length > 0 &&
+                m('div.mm-validation-summary[role=alert][aria-live=assertive]', [
+                    m('p.mm-validation-summary__title', summaryTitle),
+                    m('ul.mm-validation-summary__list', errors.map((error, index) => {
+                        var _a, _b, _c;
+                        const href = (_a = error.href) !== null && _a !== void 0 ? _a : (error.fieldId ? `#${error.fieldId}` : undefined);
+                        return m('li', { key: `${(_c = (_b = error.fieldId) !== null && _b !== void 0 ? _b : href) !== null && _c !== void 0 ? _c : 'error'}-${index}` }, href
+                            ? m('a', { href, onclick: () => focusErrorTarget(error.fieldId) }, error.message)
+                            : error.message);
+                    })),
+                ]),
+            children,
+        ]);
+    },
+});
+
 // List of MaterialIcon SVG icons that are available
 const materialIconSvgNames = [
     'caret',
@@ -9297,6 +9670,7 @@ const materialIconSvgNames = [
 const renderIcon = (icon, style) => {
     if (!icon)
         return null;
+    const objectStyle = typeof style === 'string' ? undefined : style;
     if (typeof icon === 'string') {
         // Check if this is a MaterialIcon SVG name
         if (materialIconSvgNames.includes(icon)) {
@@ -9313,7 +9687,7 @@ const renderIcon = (icon, style) => {
         // Image URL
         return m('img', {
             src: icon.content,
-            style: Object.assign(Object.assign({}, style), { width: '24px', height: '24px', objectFit: 'contain' }),
+            style: Object.assign(Object.assign({}, objectStyle), { width: '24px', height: '24px', objectFit: 'contain' }),
         });
     }
     return null;
@@ -9324,8 +9698,10 @@ const renderIcon = (icon, style) => {
 const SidenavHeaderFooterItem = () => {
     return {
         view: ({ attrs }) => {
-            const { text, icon, onclick, href, className = '', _isExpanded = true, _position = 'left' } = attrs;
+            const { text, icon, onclick, href, className = '', title, tooltip, tooltipWhenCollapsedOnly = true, _isExpanded = true, _position = 'left', } = attrs;
             const isRightAligned = _position === 'right';
+            const tooltipText = title || tooltip || text;
+            const shouldShowTooltip = tooltipWhenCollapsedOnly ? !_isExpanded : true;
             const handleClick = (e) => {
                 if (onclick) {
                     e.preventDefault();
@@ -9334,24 +9710,25 @@ const SidenavHeaderFooterItem = () => {
             };
             const content = isRightAligned
                 ? [
-                    _isExpanded &&
-                        m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text),
+                    _isExpanded && m('span.sidenav-item-text.mm-layout-grow.mm-layout-mr-8.left-align', text),
                     renderIcon(icon, { 'min-width': '24px', width: '24px' }),
                 ]
                 : [
                     renderIcon(icon, { 'min-width': '24px', width: '24px' }),
-                    _isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text),
+                    _isExpanded && m('span.sidenav-item-text.mm-layout-grow.mm-layout-ml-8', text),
                 ];
             const linkStyle = {
-                display: 'flex',
-                'align-items': 'center',
                 padding: _isExpanded ? '12px 16px' : '12px 18px',
                 'justify-content': _isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
             };
+            const linkClass = 'mm-layout-row mm-layout-row--center';
             return m('li', { class: className }, m('a', {
                 href: href || '#!',
                 onclick: handleClick,
+                class: linkClass,
                 style: linkStyle,
+                title: shouldShowTooltip ? tooltipText : undefined,
+                'aria-label': shouldShowTooltip ? tooltipText : undefined,
             }, content));
         },
     };
@@ -9452,6 +9829,7 @@ const Sidenav = () => {
                         fixed ? 'sidenav-fixed' : '',
                         mode === 'push' ? 'sidenav-push' : '',
                         expandable && !isExpanded ? 'sidenav-collapsed' : '',
+                        'mm-layout-stack',
                         className,
                     ]
                         .filter(Boolean)
@@ -9461,8 +9839,6 @@ const Sidenav = () => {
                         transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
                         'transition-duration': `${animationDuration}ms`,
                         'transition-property': 'transform, width',
-                        display: 'flex',
-                        'flex-direction': 'column',
                     },
                 }, [
                     // Header content slot (rendered first, before hamburger)
@@ -9479,10 +9855,8 @@ const Sidenav = () => {
                     // Hamburger toggle button (inside sidenav, at the top)
                     showHamburger &&
                         m('li.sidenav-hamburger-item', {
+                            class: `mm-layout-row mm-layout-row--center ${position === 'right' ? 'mm-layout-row--justify-end' : 'mm-layout-row--justify-start'}`,
                             style: {
-                                display: 'flex',
-                                'justify-content': position === 'right' ? 'flex-end' : 'flex-start',
-                                'align-items': 'center',
                                 padding: '12px 16px',
                                 cursor: 'pointer',
                                 'border-bottom': '1px solid rgba(0,0,0,0.1)',
@@ -9498,10 +9872,8 @@ const Sidenav = () => {
                     // Expand/collapse toggle button (if expandable, right below hamburger)
                     expandable &&
                         m('li.sidenav-expand-toggle', {
+                            class: `mm-layout-row mm-layout-row--center ${position === 'right' ? 'mm-layout-row--justify-end' : 'mm-layout-row--justify-start'}`,
                             style: {
-                                display: 'flex',
-                                'justify-content': position === 'right' ? 'flex-end' : 'flex-start',
-                                'align-items': 'center',
                                 padding: '12px 16px',
                                 cursor: 'pointer',
                                 'border-bottom': '1px solid rgba(0,0,0,0.1)',
@@ -9574,7 +9946,7 @@ const NavbarSubItem = () => {
             const submenuContent = isRightAligned
                 ? [
                     // Right-aligned: text on left, icons on right
-                    isExpanded && m('span', { style: { flex: '1', 'text-align': 'left' } }, text),
+                    isExpanded && m('span.mm-layout-grow.left-align', text),
                     icon && isExpanded && renderIcon(icon, { 'font-size': '18px' }),
                     indicatorIcon,
                 ]
@@ -9582,18 +9954,22 @@ const NavbarSubItem = () => {
                     // Left-aligned: indicator on left, text and icon on right
                     indicatorIcon,
                     icon && isExpanded && renderIcon(icon, { 'font-size': '18px', 'margin-left': indicatorIcon ? '8px' : '0' }),
-                    isExpanded && m('span', { style: { 'margin-left': icon || indicatorIcon ? '8px' : '0' } }, text),
+                    isExpanded && m('span', { class: icon || indicatorIcon ? 'mm-layout-ml-8' : undefined }, text),
                 ];
             return m('li.sidenav-subitem', {
-                class: selected ? 'selected' : '',
+                class: [
+                    selected ? 'selected' : '',
+                    'mm-layout-row',
+                    'mm-layout-row--center',
+                    'mm-layout-gap-sm',
+                    isRightAligned ? 'mm-layout-row--justify-between' : 'mm-layout-row--justify-start',
+                ]
+                    .filter(Boolean)
+                    .join(' ') || undefined,
                 style: {
                     padding: isExpanded ? '0 16px 0 48px' : '0 16px',
                     cursor: 'pointer',
-                    display: 'flex',
-                    'align-items': 'center',
-                    gap: '8px',
                     'font-size': '0.9em',
-                    'justify-content': isRightAligned ? 'space-between' : 'flex-start',
                     height: '48px',
                     'min-height': '48px',
                 },
@@ -9610,7 +9986,7 @@ const SidenavItem = () => {
     let isSubmenuOpen = false;
     return {
         view: ({ attrs, children }) => {
-            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, submenu = [], submenuMode = 'checkbox', } = attrs;
+            const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, submenu = [], submenuMode = 'checkbox', title, tooltip, tooltipWhenCollapsedOnly = true, } = attrs;
             if (divider) {
                 return m('li.divider');
             }
@@ -9635,39 +10011,45 @@ const SidenavItem = () => {
             const isExpanded = attrs._isExpanded !== false;
             const position = attrs._position || 'left';
             const isRightAligned = position === 'right';
+            const tooltipText = title || tooltip || text;
+            const shouldShowTooltip = tooltipWhenCollapsedOnly ? !isExpanded : true;
             // In expanded mode, icons are at the outside edge
             // In collapsed mode, icons are centered
             const content = isRightAligned
                 ? [
                     // Right-aligned: text on left, icon on right
-                    isExpanded &&
-                        m('span.sidenav-item-text', { style: { flex: '1', 'text-align': 'left', 'margin-right': '8px' } }, text || children),
+                    isExpanded && m('span.sidenav-item-text.mm-layout-grow.mm-layout-mr-8.left-align', text || children),
                     renderIcon(icon, { 'min-width': '24px', width: '24px' }),
                 ]
                 : [
                     // Left-aligned: icon on left, text on right
                     renderIcon(icon, { 'min-width': '24px', width: '24px' }),
-                    isExpanded && m('span.sidenav-item-text', { style: { 'margin-left': '8px', flex: '1' } }, text || children),
+                    isExpanded && m('span.sidenav-item-text.mm-layout-grow.mm-layout-ml-8', text || children),
                 ];
             const linkStyle = {
-                display: 'flex',
-                'align-items': 'center',
                 padding: isExpanded ? '12px 16px' : '12px 18px',
                 'justify-content': isExpanded ? (isRightAligned ? 'flex-end' : 'flex-start') : 'center',
             };
+            const linkClass = 'mm-layout-row mm-layout-row--center';
             const mainItem = href && !disabled
                 ? m('li', { class: itemClasses }, [
                     m('a', {
                         href,
                         onclick: handleMainClick,
+                        class: linkClass,
                         style: linkStyle,
+                        title: shouldShowTooltip ? tooltipText : undefined,
+                        'aria-label': shouldShowTooltip ? tooltipText : undefined,
                     }, content),
                 ])
                 : m('li', { class: itemClasses }, [
                     m('a', {
                         onclick: handleMainClick,
                         href: '#!',
+                        class: linkClass,
                         style: linkStyle,
+                        title: shouldShowTooltip ? tooltipText : undefined,
+                        'aria-label': shouldShowTooltip ? tooltipText : undefined,
                     }, content),
                 ]);
             // Return main item with submenu if applicable
@@ -10183,8 +10565,9 @@ const TreeNodeComponent = () => {
                         const childIsFocused = ((_e = attrs.treeState) === null || _e === void 0 ? void 0 : _e.focusedNodeId) === child.id;
                         // Calculate if this child is last in branch
                         const childPath = [...(attrs.currentPath || []), childIndex];
-                        const childIsLastInBranch = ((_f = attrs.treeAttrs) === null || _f === void 0 ? void 0 : _f.data) ?
-                            isNodeLastInBranch(childPath, attrs.treeAttrs.data) : false;
+                        const childIsLastInBranch = ((_f = attrs.treeAttrs) === null || _f === void 0 ? void 0 : _f.data)
+                            ? isNodeLastInBranch(childPath, attrs.treeAttrs.data)
+                            : false;
                         return m(TreeNodeComponent, {
                             key: child.id,
                             node: child,
@@ -10317,10 +10700,7 @@ const TreeView = () => {
         view: ({ attrs }) => {
             const { data, className, style, id, selectionMode = 'single', showConnectors = true } = attrs;
             return m('div.tree-view', {
-                class: [
-                    className,
-                    showConnectors && 'show-connectors'
-                ].filter(Boolean).join(' ') || undefined,
+                class: [className, showConnectors && 'show-connectors'].filter(Boolean).join(' ') || undefined,
                 style,
                 id,
                 role: selectionMode === 'multiple' ? 'listbox' : 'tree',
@@ -11018,6 +11398,7 @@ const Rating = () => {
     };
 };
 
+const MOBILE_LAYOUT_BREAKPOINT = 600;
 /** Create a LikertScale component */
 const LikertScale = () => {
     const state = {
@@ -11080,6 +11461,22 @@ const LikertScale = () => {
                 return 'likert-scale--responsive';
         }
     };
+    const isVerticalLayout = (layout) => {
+        if (layout === 'vertical')
+            return true;
+        if (layout === 'horizontal')
+            return false;
+        return typeof window !== 'undefined' ? window.innerWidth <= MOBILE_LAYOUT_BREAKPOINT : false;
+    };
+    const getInlineAnchorLabel = (value, min, max, middleValue, startLabel, middleLabel, endLabel) => {
+        if (value === min && startLabel)
+            return startLabel;
+        if (middleLabel && middleValue !== undefined && value === middleValue)
+            return middleLabel;
+        if (value === max && endLabel)
+            return endLabel;
+        return undefined;
+    };
     const handleChange = (attrs, newValue) => {
         var _a;
         if (attrs.readonly || attrs.disabled)
@@ -11126,7 +11523,7 @@ const LikertScale = () => {
     const LikertScaleItem = () => {
         return {
             view: ({ attrs }) => {
-                const { value, currentValue, showNumber, showTooltip, tooltipLabel, groupId, name, disabled, readonly, onchange, } = attrs;
+                const { value, currentValue, showNumber, showTooltip, tooltipLabel, groupId, name, disabled, readonly, anchorLabel, onchange, } = attrs;
                 const radioId = `${groupId}-${value}`;
                 const isChecked = currentValue === value;
                 return m('.likert-scale__item.no-select', {
@@ -11153,6 +11550,7 @@ const LikertScale = () => {
                     m('label.likert-scale__label', {
                         for: radioId,
                     }),
+                    anchorLabel && m('.likert-scale__item-anchor', anchorLabel),
                     // Tooltip (optional)
                     showTooltip && tooltipLabel && m('.likert-scale__tooltip', tooltipLabel),
                 ]);
@@ -11176,6 +11574,8 @@ const LikertScale = () => {
             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;
+            const useInlineAnchors = isVerticalLayout(layout);
+            const middleValue = middleLabel ? min + Math.floor((itemCount - 1) / 2) * step : undefined;
             // Generate scale values
             const scaleValues = Array.from({ length: itemCount }, (_, i) => min + i * step);
             return m('.likert-scale', {
@@ -11224,6 +11624,9 @@ const LikertScale = () => {
                         showNumber: showNumbers,
                         showTooltip: showTooltips,
                         tooltipLabel: tooltipLabels === null || tooltipLabels === void 0 ? void 0 : tooltipLabels[value - min],
+                        anchorLabel: useInlineAnchors
+                            ? getInlineAnchorLabel(value, min, max, middleValue, startLabel, middleLabel, endLabel)
+                            : undefined,
                         groupId: state.groupId,
                         name,
                         disabled,
@@ -11231,7 +11634,8 @@ const LikertScale = () => {
                         onchange: (v) => handleChange(attrs, v),
                     }))),
                     // Scale anchors
-                    (startLabel || middleLabel || endLabel) &&
+                    !useInlineAnchors &&
+                        (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),
@@ -11416,6 +11820,9 @@ const CircularProgress = () => {
             const { mode = 'indeterminate', value = 0, max = 100, size = 'medium', color = 'teal', colorIntensity, label, showPercentage = false, className = '', style = {}, id = state.id, 'aria-label': ariaLabel, 'aria-valuemin': ariaValueMin = 0, 'aria-valuemax': ariaValueMax = max, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText } = attrs, params = __rest(attrs, ["mode", "value", "max", "size", "color", "colorIntensity", "label", "showPercentage", "className", "style", "id", 'aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-valuetext']);
             const isDeterminate = mode === 'determinate';
             const sizePixels = SIZE_MAP[size];
+            const styleValue = typeof style === 'string'
+                ? `width:${sizePixels}px;height:${sizePixels}px;${style}`
+                : Object.assign({ width: `${sizePixels}px`, height: `${sizePixels}px` }, style);
             const { radius, circumference, strokeDashoffset, percentage } = isDeterminate
                 ? calculateStrokeProperties(sizePixels, value, max)
                 : { radius: 0, circumference: 0, strokeDashoffset: 0, percentage: 0 };
@@ -11442,7 +11849,7 @@ const CircularProgress = () => {
                 : {
                     'aria-valuetext': ariaValueText || label || 'Loading',
                 };
-            return m('.circular-progress', Object.assign(Object.assign(Object.assign({}, params), { className: classNames, style: Object.assign({ width: `${sizePixels}px`, height: `${sizePixels}px` }, style), id, role: 'progressbar', 'aria-label': ariaLabel || (isDeterminate ? `Progress: ${Math.round(percentage)}%` : 'Loading') }), ariaAttrs), [
+            return m('.circular-progress', Object.assign(Object.assign(Object.assign({}, params), { className: classNames, style: styleValue, id, role: 'progressbar', 'aria-label': ariaLabel || (isDeterminate ? `Progress: ${Math.round(percentage)}%` : 'Loading') }), ariaAttrs), [
                 // SVG circle
                 m('svg.circular-progress__svg', {
                     viewBox: `0 0 ${sizePixels} ${sizePixels}`,
@@ -11507,13 +11914,7 @@ const LinearProgress = () => {
             // Determine label content
             const labelContent = label !== undefined ? label : showPercentage && isDeterminate ? `${Math.round(percentage)}%` : '';
             // Build class names
-            const classNames = [
-                'linear-progress',
-                getColorClass(color, colorIntensity),
-                className,
-            ]
-                .filter(Boolean)
-                .join(' ');
+            const classNames = ['linear-progress', getColorClass(color, colorIntensity), className].filter(Boolean).join(' ');
             // ARIA attributes
             const ariaAttrs = isDeterminate
                 ? {
@@ -11566,4 +11967,5 @@ 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, 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 };
+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, Fieldset, FileInput, FileUpload, FlatButton, FloatingActionButton, FormSection, 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, ToggleButton, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createAsyncComboboxState, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getComboboxKeyResult, getComboboxOptionId, getComboboxViewState, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, normalizeSelection, padLeft, parseTime, range, rejectAsyncComboboxRequest, releasePortalContainer, renderFieldChrome, renderToPortal, resolveAsyncComboboxRequest, resolveControllableValue, scrollToValue, snapToNearestItem, sortOptions, startAsyncComboboxRequest, syncPortalContent, timeToMinutes, toast, uniqueId, uuid4 };
+//# sourceMappingURL=index.esm.js.map