mithril-materialized 3.15.0 → 3.17.0

package/dist/index.umd.js

@@ -38,6 +38,35 @@
         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
@@ -98,6 +127,42 @@
      * @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) {
@@ -129,8 +194,10 @@
                     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;
@@ -146,33 +213,26 @@
         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`;
@@ -239,9 +299,17 @@
      * @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.
@@ -256,35 +324,6 @@
         }
     };
 
-    // 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 = {
@@ -307,6 +346,28 @@
                 .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
@@ -412,7 +473,6 @@
                     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,
@@ -493,9 +553,7 @@
                                         },
                                     }, 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,
@@ -722,7 +780,7 @@
     /**
      * 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 () => {
@@ -745,15 +803,21 @@
                             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');
@@ -810,7 +874,7 @@
                 // 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 }));
             },
         };
     };
@@ -1277,11 +1341,19 @@
                 };
                 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',
                 })));
@@ -1680,6 +1752,106 @@
         };
     };
 
+    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';
+    };
+
     exports.CollectionMode = void 0;
     (function (CollectionMode) {
         CollectionMode[CollectionMode["BASIC"] = 0] = "BASIC";
@@ -2379,6 +2551,7 @@
                                             e.stopPropagation();
                                             gotoMonth(index);
                                             state.monthDropdownOpen = false;
+                                            m.redraw();
                                         },
                                     }, monthName))),
                             ]),
@@ -2403,6 +2576,7 @@
                                             e.stopPropagation();
                                             gotoYear(i);
                                             state.yearDropdownOpen = false;
+                                            m.redraw();
                                         },
                                     }, i))),
                             ]),
@@ -3287,6 +3461,10 @@
         },
     };
 
+    const isReadonly = (attrs) => {
+        const legacyReadonly = attrs.readonly;
+        return Boolean(attrs.readOnly || legacyReadonly);
+    };
     /** Character counter component that tracks text length against maxLength */
     const CharacterCounter = () => {
         return {
@@ -3365,7 +3543,7 @@
         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. ` +
@@ -3382,7 +3560,7 @@
                 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 || '';
@@ -3498,14 +3676,12 @@
                                     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,
@@ -3585,7 +3761,7 @@
         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. ` +
@@ -3625,7 +3801,7 @@
                 }
                 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;
@@ -3644,9 +3820,28 @@
                 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',
@@ -3728,7 +3923,7 @@
                             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);
@@ -3818,6 +4013,22 @@
                                 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, {
@@ -3830,14 +4041,12 @@
                             },
                         })
                         : 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,
@@ -3937,7 +4146,7 @@
             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,
@@ -4702,17 +4911,6 @@
         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) => {
@@ -4726,15 +4924,14 @@
                     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,
@@ -4751,8 +4948,12 @@
                     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 }) => {
@@ -4773,15 +4974,19 @@
                 // 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) {
@@ -4813,6 +5018,7 @@
                     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) => {
@@ -4880,15 +5086,14 @@
                                             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,
@@ -6845,9 +7050,9 @@
     };
 
     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,
@@ -6855,7 +7060,7 @@
                     checked,
                     onclick: onchange ? () => onchange(id) : undefined,
                 }),
-                m('span', m.trust(label)),
+                m('span', allowHtml ? m.trust(label) : label),
             ]));
         },
     });
@@ -6882,8 +7087,9 @@
                 }
             },
             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
@@ -6893,11 +7099,11 @@
                 }
                 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
@@ -6912,16 +7118,16 @@
                 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),
                 ]);
             },
@@ -7058,6 +7264,26 @@
                 opacity: 1,
             };
         };
+        const formatSelectionSummary = (attrs, selectedOptions, selectedIds, placeholder) => {
+            const mode = attrs.summaryMode || 'labels';
+            const selectedCount = selectedIds.length;
+            const totalCount = attrs.options.filter((option) => !option.disabled).length;
+            if (mode === 'labels') {
+                return selectedOptions.length > 0 ? selectedOptions.map((o) => o.label || o.id).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
@@ -7126,17 +7352,6 @@
         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,
@@ -7148,8 +7363,12 @@
                     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 }) => {
@@ -7182,35 +7401,29 @@
                 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 triggerValue = formatSelectionSummary(attrs, selectedOptions, selectedIds, placeholder);
                 // Update portal dropdown when inside modal
                 if (state.isInsideModal) {
                     updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
@@ -7230,9 +7443,15 @@
                         '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;
                             },
@@ -7264,14 +7483,12 @@
                         }),
                     ]),
                     // 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,
+                    }),
                 ]);
             },
         };
@@ -7490,59 +7707,65 @@
         };
     };
 
-    // 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,
@@ -7550,17 +7773,38 @@
             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;
@@ -7571,40 +7815,51 @@
             }
             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) => {
@@ -7685,9 +7940,10 @@
                 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
@@ -7714,20 +7970,26 @@
                             : [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()) &&
@@ -7740,6 +8002,14 @@
                 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', {
@@ -7750,14 +8020,34 @@
                             // 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',
                         },
@@ -7770,30 +8060,41 @@
                             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
@@ -7805,6 +8106,8 @@
                     // Dropdown Menu
                     state.isOpen &&
                         m('ul.dropdown-content.select-dropdown', {
+                            id: state.listboxId,
+                            role: 'listbox',
                             oncreate: ({ dom }) => {
                                 state.dropdownRef = dom;
                             },
@@ -7829,23 +8132,39 @@
                                     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
                                 ? [
@@ -7878,6 +8197,9 @@
                             ...(showAddNew
                                 ? [
                                     m('li', {
+                                        id: `${state.listboxId}-action`,
+                                        role: 'option',
+                                        'aria-selected': 'false',
                                         onclick: async () => {
                                             await createAndSelectOption(attrs);
                                         },
@@ -7889,9 +8211,10 @@
                                 ]
                                 : []),
                             // 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),
@@ -7904,6 +8227,10 @@
                 ]);
             },
         };
+        if (maybeVnode === null || maybeVnode === void 0 ? void 0 : maybeVnode.state) {
+            maybeVnode.state.__searchSelectInstance = componentInstance;
+        }
+        return componentInstance;
     };
 
     const defaultI18n$2 = {
@@ -9277,6 +9604,53 @@
         };
     };
 
+    /** 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',
@@ -9299,6 +9673,7 @@
     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)) {
@@ -9315,7 +9690,7 @@
             // 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;
@@ -9326,8 +9701,10 @@
     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();
@@ -9336,24 +9713,25 @@
                 };
                 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));
             },
         };
@@ -9375,9 +9753,9 @@
                 m.redraw();
             }
         };
-        const setBodyOverflow = (isOpen, mode) => {
+        const setBodyOverflow = (isOpen, mode, fixed) => {
             if (typeof document !== 'undefined') {
-                document.body.style.overflow = isOpen && mode === 'overlay' ? 'hidden' : '';
+                document.body.style.overflow = isOpen && mode === 'overlay' && !fixed ? 'hidden' : '';
             }
         };
         const toggleExpanded = (attrs) => {
@@ -9413,7 +9791,7 @@
                 if (wasOpen !== isOpen) {
                     state.isOpen = isOpen;
                     state.isAnimating = true;
-                    setBodyOverflow(isOpen, attrs.mode || 'overlay');
+                    setBodyOverflow(isOpen, attrs.mode || 'overlay', attrs.fixed || false);
                     // Clear animation state after animation completes
                     setTimeout(() => {
                         state.isAnimating = false;
@@ -9423,7 +9801,7 @@
             },
             onremove: ({ attrs }) => {
                 // Clean up
-                setBodyOverflow(false, attrs.mode || 'overlay');
+                setBodyOverflow(false, attrs.mode || 'overlay', attrs.fixed || false);
                 if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
                     document.removeEventListener('keydown', (e) => handleEscapeKey(e, attrs));
                 }
@@ -9452,7 +9830,9 @@
                         class: [
                             position === 'right' ? 'right-aligned' : '',
                             fixed ? 'sidenav-fixed' : '',
+                            mode === 'push' ? 'sidenav-push' : '',
                             expandable && !isExpanded ? 'sidenav-collapsed' : '',
+                            'mm-layout-stack',
                             className,
                         ]
                             .filter(Boolean)
@@ -9464,13 +9844,22 @@
                             'transition-property': 'transform, width',
                         },
                     }, [
+                        // Header content slot (rendered first, before hamburger)
+                        attrs.headerContent &&
+                            m('li.sidenav-header-slot', {
+                                style: {
+                                    'flex-shrink': 0,
+                                    'list-style': 'none',
+                                    height: 'auto',
+                                    'line-height': 'normal',
+                                    padding: 0,
+                                },
+                            }, attrs.headerContent),
                         // 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)',
@@ -9486,10 +9875,8 @@
                         // 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)',
@@ -9517,7 +9904,19 @@
                             : children,
                         // Footer item (if provided, appears at the bottom)
                         attrs.footer &&
-                            m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: 'sidenav-footer-item' })),
+                            m(SidenavHeaderFooterItem, Object.assign(Object.assign({}, attrs.footer), { _isExpanded: isExpanded, _position: position, className: ['sidenav-footer-item', attrs.footer.className].filter(Boolean).join(' ') })),
+                        // Footer content slot (rendered last, pushed to bottom via margin-top: auto)
+                        attrs.footerContent &&
+                            m('li.sidenav-footer-slot', {
+                                style: {
+                                    'margin-top': 'auto',
+                                    'flex-shrink': 0,
+                                    'list-style': 'none',
+                                    height: 'auto',
+                                    'line-height': 'normal',
+                                    padding: 0,
+                                },
+                            }, attrs.footerContent),
                     ]),
                 ];
             },
@@ -9550,7 +9949,7 @@
                 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,
                     ]
@@ -9558,18 +9957,22 @@
                         // 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',
                     },
@@ -9586,7 +9989,7 @@
         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');
                 }
@@ -9611,39 +10014,45 @@
                 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
@@ -10159,8 +10568,9 @@
                             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,
@@ -10293,10 +10703,7 @@
             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',
@@ -10994,6 +11401,7 @@
         };
     };
 
+    const MOBILE_LAYOUT_BREAKPOINT = 600;
     /** Create a LikertScale component */
     const LikertScale = () => {
         const state = {
@@ -11056,6 +11464,22 @@
                     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)
@@ -11102,7 +11526,7 @@
         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', {
@@ -11129,6 +11553,7 @@
                         m('label.likert-scale__label', {
                             for: radioId,
                         }),
+                        anchorLabel && m('.likert-scale__item-anchor', anchorLabel),
                         // Tooltip (optional)
                         showTooltip && tooltipLabel && m('.likert-scale__tooltip', tooltipLabel),
                     ]);
@@ -11152,6 +11577,8 @@
                 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', {
@@ -11200,6 +11627,9 @@
                             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,
@@ -11207,7 +11637,8 @@
                             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),
@@ -11392,6 +11823,9 @@
                 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 };
@@ -11418,7 +11852,7 @@
                     : {
                         '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}`,
@@ -11483,13 +11917,7 @@
                 // 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,10 +11994,12 @@
     exports.DoubleRangeSlider = DoubleRangeSlider;
     exports.Dropdown = Dropdown;
     exports.EmailInput = EmailInput;
+    exports.Fieldset = Fieldset;
     exports.FileInput = FileInput;
     exports.FileUpload = FileUpload;
     exports.FlatButton = FlatButton;
     exports.FloatingActionButton = FloatingActionButton;
+    exports.FormSection = FormSection;
     exports.HelperText = HelperText;
     exports.Icon = Icon;
     exports.IconButton = IconButton;
@@ -11621,6 +12051,7 @@
     exports.Timeline = Timeline;
     exports.Toast = Toast;
     exports.ToastComponent = ToastComponent;
+    exports.ToggleButton = ToggleButton;
     exports.ToggleGroup = ToggleGroup;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
@@ -11629,10 +12060,14 @@
     exports.Wizard = Wizard;
     exports.addLeadingZero = addLeadingZero;
     exports.clearPortal = clearPortal;
+    exports.createAsyncComboboxState = createAsyncComboboxState;
     exports.createBreadcrumb = createBreadcrumb;
     exports.formatTime = formatTime;
     exports.generateHourOptions = generateHourOptions;
     exports.generateMinuteOptions = generateMinuteOptions;
+    exports.getComboboxKeyResult = getComboboxKeyResult;
+    exports.getComboboxOptionId = getComboboxOptionId;
+    exports.getComboboxViewState = getComboboxViewState;
     exports.getDropdownStyles = getDropdownStyles;
     exports.getPortalContainer = getPortalContainer;
     exports.initPushpins = initPushpins;
@@ -11641,17 +12076,25 @@
     exports.isTimeDisabled = isTimeDisabled;
     exports.isValidationError = isValidationError;
     exports.isValidationSuccess = isValidationSuccess;
+    exports.normalizeSelection = normalizeSelection;
     exports.padLeft = padLeft;
     exports.parseTime = parseTime;
     exports.range = range;
+    exports.rejectAsyncComboboxRequest = rejectAsyncComboboxRequest;
     exports.releasePortalContainer = releasePortalContainer;
+    exports.renderFieldChrome = renderFieldChrome;
     exports.renderToPortal = renderToPortal;
+    exports.resolveAsyncComboboxRequest = resolveAsyncComboboxRequest;
+    exports.resolveControllableValue = resolveControllableValue;
     exports.scrollToValue = scrollToValue;
     exports.snapToNearestItem = snapToNearestItem;
     exports.sortOptions = sortOptions;
+    exports.startAsyncComboboxRequest = startAsyncComboboxRequest;
+    exports.syncPortalContent = syncPortalContent;
     exports.timeToMinutes = timeToMinutes;
     exports.toast = toast;
     exports.uniqueId = uniqueId;
     exports.uuid4 = uuid4;
 
 }));
+//# sourceMappingURL=index.umd.js.map