@ktjs/mui 0.19.0 → 0.20.2

package/dist/index.iife.js

@@ -11,6 +11,7 @@ var __ktjs_mui__ = (function (exports) {
     };
 
     // DOM manipulation utilities
+    // # dom natives
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -46,10 +47,11 @@ var __ktjs_mui__ = (function (exports) {
                 $appendChild.call(this, fragment);
             }
         };
+    const { get: $buttonDisabledGetter$2, set: $buttonDisabledSetter$2 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
 
     const booleanHandler = (element, key, value) => {
         if (key in element) {
@@ -192,7 +194,14 @@ var __ktjs_mui__ = (function (exports) {
         }
     }
 
-    const svgTempWrapper = document.createElement('div');
+    document.createElement('div');
+    const htmlCreator = (tag) => document.createElement(tag);
+    const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
+    const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
+    let creator = htmlCreator;
+    // # consts
+    const SVG_ATTR_FLAG = '__kt_svg__';
+    const MATHML_ATTR_FLAG = '__kt_mathml__';
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -203,7 +212,7 @@ var __ktjs_mui__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.19.0 (Last Update: 2026.01.31 22:50:55.987)
+     * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -214,15 +223,32 @@ var __ktjs_mui__ = (function (exports) {
         if (typeof tag !== 'string') {
             $throw('tagName must be a string.');
         }
+        if (attr) {
+            if (SVG_ATTR_FLAG in attr) {
+                delete attr[SVG_ATTR_FLAG];
+                creator = svgCreator;
+            }
+            else if (MATHML_ATTR_FLAG in attr) {
+                delete attr[MATHML_ATTR_FLAG];
+                creator = mathMLCreator;
+            }
+            else {
+                creator = htmlCreator;
+            }
+        }
         // * start creating the element
-        const element = document.createElement(tag);
+        const element = creator(tag);
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        if (tag === 'svg') {
-            svgTempWrapper.innerHTML = element.outerHTML;
-            return svgTempWrapper.firstChild;
-        }
+        // if (tag === 'svg') {
+        //   tempWrapper.innerHTML = element.outerHTML;
+        //   return tempWrapper.firstChild as HTML<T>;
+        // }
+        // if (tag === 'math') {
+        //   tempWrapper.innerHTML = element.outerHTML;
+        //   return tempWrapper.firstChild as HTML<T>;
+        // }
         return element;
     };
 
@@ -231,21 +257,13 @@ var __ktjs_mui__ = (function (exports) {
      * @param tag html tag or function component
      * @param props properties/attributes
      */
-    function jsx(tag, props = {}) {
+    function jsx(tag, props) {
         const ref = props.ref?.isKT ? props.ref : dummyRef;
         let el;
-        const redraw = (newProps) => {
-            props = newProps ? { ...props, ...newProps } : props;
-            el = jsx(tag, props);
-            if (ref !== dummyRef) {
-                ref.value = el; // & ref setter automatically replaces old element in DOM
-            }
-            return el;
-        };
         if ('k-if' in props && !props['k-if']) {
+            // & make comment placeholder in case that ref might be redrawn later
             el = document.createComment('k-if');
-            ref.value = el; // & ref setter automatically replaces old element in DOM
-            el.redraw = redraw;
+            ref.value = el;
             return el;
         }
         // Handle function components
@@ -255,7 +273,6 @@ var __ktjs_mui__ = (function (exports) {
         else {
             el = h(tag, props, props.children);
         }
-        el.redraw ??= redraw;
         ref.value = el;
         return el;
     }
@@ -265,57 +282,16 @@ var __ktjs_mui__ = (function (exports) {
      */
     const jsxs = jsx;
 
-    /**s
-     * Alert component - mimics MUI Alert appearance and behavior
-     */
-    function Alert(props) {
-        const { children, style = '', severity = 'info', variant = 'standard', icon, 'kt:close': onClose } = props;
-        const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
-        // Convert sx object to style string
-        let styleString = typeof style === 'string' ? style : '';
-        if (style && typeof style === 'object') {
-            const sxStyles = Object.entries(style)
-                .map(([key, value]) => {
-                // Convert camelCase to kebab-case
-                const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-                return `${cssKey}: ${value}`;
-            })
-                .join('; ');
-            styleString = styleString ? `${styleString}; ${sxStyles}` : sxStyles;
-        }
-        // Icon SVG paths for different severities
-        const getIcon = () => {
-            if (icon === false)
-                return null;
-            if (icon)
-                return icon;
-            const iconSize = '22px';
-            const iconClass = 'mui-alert-icon';
-            switch (severity) {
-                case 'success':
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
-                case 'error':
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }));
-                case 'warning':
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
-                case 'info':
-                default:
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
-            }
-        };
-        const alertIcon = getIcon();
-        const alert = (jsxs("div", { class: classes, style: styleString, role: "alert", children: [alertIcon && jsx("div", { class: "mui-alert-icon-wrapper", children: alertIcon }), jsx("div", { class: "mui-alert-message", children: children }), onClose && (jsx("button", { class: "mui-alert-close", "on:click": onClose, "aria-label": "Close", children: jsx("svg", { viewBox: "0 0 24 24", width: "18px", height: "18px", children: jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }))] }));
-        return alert;
-    }
-
     // Cached native methods for performance optimization
+    const $defines = Object.defineProperties;
 
     // String manipulation utilities
     /**
      * Default empty function
      */
     const $emptyFn = (() => true);
-    // Style parsing utilities
+    const { get: $buttonDisabledGetter$1, set: $buttonDisabledSetter$1 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
+    // # DOM utilities
     const parseStyle = (style) => {
         if (typeof style === 'string') {
             return style;
@@ -344,25 +320,54 @@ var __ktjs_mui__ = (function (exports) {
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
+
+    function Alert(props) {
+        const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose } = props;
+        const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
+        // Icon SVG paths for different severities
+        const getIcon = () => {
+            if (icon === false) {
+                return null;
+            }
+            if (icon) {
+                return icon;
+            }
+            const iconSize = '22px';
+            const iconClass = 'mui-alert-icon';
+            switch (severity) {
+                case 'success':
+                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
+                case 'error':
+                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }));
+                case 'warning':
+                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
+                case 'info':
+                default:
+                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+            }
+        };
+        const alertIcon = getIcon();
+        const alert = (jsxs("div", { class: classes, style: parseStyle(props.style), role: "alert", children: [alertIcon && jsx("div", { class: "mui-alert-icon-wrapper", children: alertIcon }), jsx("div", { class: "mui-alert-message", children: children }), jsx("button", { "k-if": onClose, class: "mui-alert-close", "on:click": onClose, "aria-label": "Close", children: jsx("svg", { viewBox: "0 0 24 24", width: "18px", height: "18px", children: jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }));
+        return alert;
+    }
 
     /**
      * Button component - mimics MUI Button appearance and behavior
      */
     function Button(props) {
-        const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = $emptyFn, } = props;
+        let { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = $emptyFn, } = props;
         const classes = [
             'mui-button',
             `mui-button-${variant}`,
             `mui-button-${variant}-${color}`,
             `mui-button-size-${size}`,
-            fullWidth && 'mui-button-fullwidth',
-            iconOnly && 'mui-button-icon-only',
-            disabled && 'mui-button-disabled',
+            fullWidth ? 'mui-button-fullwidth' : '',
+            iconOnly ? 'mui-button-icon-only' : '',
+            disabled ? 'mui-button-disabled' : '',
             props.class ? props.class : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
+        ].join(' ');
+        const rippleContainer = jsx("span", { class: "mui-button-ripple" });
         const handleClick = (e) => {
             if (disabled) {
                 e.preventDefault();
@@ -370,7 +375,6 @@ var __ktjs_mui__ = (function (exports) {
             }
             // Create ripple effect
             const button = e.currentTarget;
-            const rippleContainer = button.querySelector('.mui-button-ripple');
             if (rippleContainer) {
                 const rect = button.getBoundingClientRect();
                 const size = Math.max(rect.width, rect.height);
@@ -383,13 +387,21 @@ var __ktjs_mui__ = (function (exports) {
                 ripple.classList.add('mui-button-ripple-effect');
                 rippleContainer.appendChild(ripple);
                 // Remove ripple after animation
-                setTimeout(() => {
-                    ripple.remove();
-                }, 600);
+                setTimeout(() => ripple.remove(), 600);
             }
             onClick(e);
         };
-        return (jsxs("button", { class: classes, style: parseStyle(props.style), type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), endIcon && jsx("span", { class: "mui-button-end-icon", children: endIcon }), jsx("span", { class: "mui-button-ripple" })] }));
+        const container = (jsxs("button", { class: classes, style: parseStyle(props.style), type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), endIcon && jsx("span", { class: "mui-button-end-icon", children: endIcon }), rippleContainer] }));
+        $defines(container, {
+            disabled: {
+                get: $buttonDisabledGetter$1,
+                set: function (value) {
+                    $buttonDisabledSetter$1.call(this, value);
+                    this.classList.toggle('mui-button-disabled', value);
+                },
+            },
+        });
+        return container;
     }
 
     /**
@@ -430,7 +442,7 @@ var __ktjs_mui__ = (function (exports) {
         // Initialize icon state
         toggleIcon(checked, indeterminate);
         const container = (jsxs("label", { class: `mui-checkbox-wrapper mui-checkbox-size-${size} ${disabled ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${color}`, children: [inputEl, jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
-        Object.defineProperties(container, {
+        $defines(container, {
             checked: {
                 get() {
                     return checked;
@@ -496,7 +508,7 @@ var __ktjs_mui__ = (function (exports) {
             return Checkbox(o);
         });
         const container = (jsx("div", { class: `mui-checkbox-group ${row ? 'mui-checkbox-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "group", children: checkboxes }));
-        Object.defineProperties(container, {
+        $defines(container, {
             value: {
                 get() {
                     return Array.from(selectedValues);
@@ -567,26 +579,28 @@ var __ktjs_mui__ = (function (exports) {
             }
             return originalRemove.call(container);
         };
-        Object.defineProperty(container, 'open', {
-            get: () => open,
-            set: (isOpen) => {
-                if (isOpen === open) {
-                    return;
-                }
-                open = isOpen;
-                if (isOpen) {
-                    // Opening: set display first, then add class with double RAF for animation
-                    container.style.display = 'flex';
-                    setTimeout(() => container.classList.add('kt-dialog-backdrop-open'), 50);
-                }
-                else {
-                    container.classList.remove('kt-dialog-backdrop-open');
-                    setTimeout(() => {
-                        if (!open) {
-                            container.style.display = 'none';
-                        }
-                    }, 225);
-                }
+        $defines(container, {
+            open: {
+                get: () => open,
+                set: (isOpen) => {
+                    if (isOpen === open) {
+                        return;
+                    }
+                    open = isOpen;
+                    if (isOpen) {
+                        // Opening: set display first, then add class with double RAF for animation
+                        container.style.display = 'flex';
+                        setTimeout(() => container.classList.add('kt-dialog-backdrop-open'), 50);
+                    }
+                    else {
+                        container.classList.remove('kt-dialog-backdrop-open');
+                        setTimeout(() => {
+                            if (!open) {
+                                container.style.display = 'none';
+                            }
+                        }, 225);
+                    }
+                },
             },
         });
         return container;
@@ -617,10 +631,11 @@ var __ktjs_mui__ = (function (exports) {
     }
 
     // Cached native methods for performance optimization
+    const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
 
     // Shared utilities and cached native methods for kt.js framework
     // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
 
     document.createElement('div');
 
@@ -629,7 +644,13 @@ var __ktjs_mui__ = (function (exports) {
          * Indicates that this is a KTRef instance
          */
         isKT = true;
+        /**
+         * @internal
+         */
         _value;
+        /**
+         * @internal
+         */
         _onChanges;
         constructor(_value, _onChanges) {
             this._value = _value;
@@ -695,13 +716,12 @@ var __ktjs_mui__ = (function (exports) {
      */
     function createRedrawable(creator) {
         const elRef = ref();
-        elRef.value = creator();
         const redraw = () => {
             elRef.value = creator(); // ref setter automatically calls replaceWith
-            elRef.value.redraw = redraw;
+            elRef.redraw = redraw;
             return elRef.value;
         };
-        elRef.value.redraw = redraw;
+        redraw();
         return elRef;
     }
 
@@ -721,15 +741,17 @@ var __ktjs_mui__ = (function (exports) {
         let progressValue = Math.min(Math.max(value, 0), 100);
         const barRef = ref();
         const container = (jsx("div", { class: classes, style: styleString, role: "progressbar", "aria-valuenow": progressValue, children: jsx("div", { ref: barRef, class: "mui-linear-progress-bar", style: variant === 'determinate' ? `width: ${progressValue}%` : '' }) }));
-        Object.defineProperty(container, 'progress', {
-            get() {
-                return progressValue;
-            },
-            set(newValue) {
-                progressValue = Math.min(Math.max(newValue, 0), 100);
-                if (variant === 'determinate') {
-                    barRef.value.style.width = `${progressValue}%`;
-                }
+        $defines(container, {
+            progress: {
+                get() {
+                    return progressValue;
+                },
+                set(newValue) {
+                    progressValue = Math.min(Math.max(newValue, 0), 100);
+                    if (variant === 'determinate') {
+                        barRef.value.style.width = `${progressValue}%`;
+                    }
+                },
             },
         });
         return container;
@@ -792,17 +814,27 @@ var __ktjs_mui__ = (function (exports) {
             updateContainerClass();
             onBlur(inputEl.value);
         };
+        const handleWrapperMouseDown = (e) => {
+            if (disabled) {
+                return;
+            }
+            const target = e.target;
+            if (!target || target === inputEl) {
+                return;
+            }
+            setTimeout(() => inputEl.focus(), 0);
+        };
         const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
         let isFocused = false;
         const inputEl = multiline
             ? (jsx("textarea", { class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, rows: rows, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }))
             : (jsx("input", { type: type, class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }));
         const helperTextEl = jsx("p", { class: "mui-textfield-helper-text", children: helperText });
-        const wrapperRef = createRedrawable(() => (jsxs("div", { class: "mui-textfield-wrapper", children: [jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxs("span", { children: [label, required && '*'] }) }) })] })));
+        const wrapperRef = createRedrawable(() => (jsxs("div", { class: "mui-textfield-wrapper", "on:mousedown": handleWrapperMouseDown, children: [jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxs("span", { children: [label, required && '*'] }) }) })] })));
         const container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: parseStyle(props.style), children: [wrapperRef, helperTextEl] }));
         // Initialize classes
         setTimeout(() => updateContainerClass(), 0);
-        Object.defineProperties(container, {
+        $defines(container, {
             value: {
                 get() {
                     return inputEl.value;
@@ -818,7 +850,7 @@ var __ktjs_mui__ = (function (exports) {
                 },
                 set(newLabel) {
                     label = newLabel;
-                    wrapperRef.value.redraw(); // label takes too much and should be redrawn
+                    wrapperRef.redraw(); // label takes too much and should be redrawn
                     updateContainerClass();
                 },
             },
@@ -906,7 +938,7 @@ var __ktjs_mui__ = (function (exports) {
         // initialize icon state
         toggleIcon(checked);
         const container = (jsxs("label", { class: `mui-radio-wrapper ${props.class ?? ''} mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, style: parseStyle(props.style), children: [input, jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsx("span", { class: "mui-radio-label", children: text })] }));
-        Object.defineProperties(container, {
+        $defines(container, {
             value: {
                 get() {
                     return value;
@@ -953,7 +985,7 @@ var __ktjs_mui__ = (function (exports) {
             return Radio(o);
         });
         const container = (jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ?? ''}`, style: parseStyle(props.style), role: "radiogroup", children: radios }));
-        Object.defineProperties(container, {
+        $defines(container, {
             value: {
                 get() {
                     return value;
@@ -976,6 +1008,7 @@ var __ktjs_mui__ = (function (exports) {
         let isOpen = false;
         let isFocused = false;
         const selectRef = ref();
+        const selectLabelRef = ref();
         // Toggle dropdown
         const toggleMenu = () => {
             if (disabled) {
@@ -988,12 +1021,9 @@ var __ktjs_mui__ = (function (exports) {
         const updateMenu = () => {
             if (isOpen) {
                 menu.value.style.display = 'block';
-                // Trigger reflow to enable animation
-                void menu.value.offsetHeight;
-                menu.value.classList.add('mui-select-menu-open');
+                void menu.value.offsetHeight; // & Trigger reflow to enable animation
             }
             else {
-                menu.value.classList.remove('mui-select-menu-open');
                 // Hide after animation completes
                 setTimeout(() => {
                     if (!isOpen) {
@@ -1001,6 +1031,7 @@ var __ktjs_mui__ = (function (exports) {
                     }
                 }, 200);
             }
+            menu.value.classList.toggle('mui-select-menu-open', isOpen);
             selectRef.value.classList.toggle('mui-select-open', isOpen);
         };
         // Handle option click
@@ -1010,11 +1041,8 @@ var __ktjs_mui__ = (function (exports) {
             onChange(value);
             updateMenu();
             updateLabelState();
-            valueDisplay.value.redraw();
-            setTimeout(() => {
-                // Trigger redraw of parent if needed
-                menu.value.redraw();
-            }, 200);
+            valueDisplay.redraw();
+            setTimeout(() => menu.redraw(), 200);
         };
         // Close menu when clicking outside
         const handleClickOutside = (e) => {
@@ -1034,15 +1062,7 @@ var __ktjs_mui__ = (function (exports) {
         };
         // Update label focused state
         const updateLabelState = () => {
-            const labelElement = selectRef.value.querySelector('.mui-select-label');
-            if (labelElement) {
-                if (isFocused || value) {
-                    labelElement.classList.add('focused');
-                }
-                else {
-                    labelElement.classList.remove('focused');
-                }
-            }
+            selectLabelRef.value.classList?.toggle('focused', isFocused || !!value);
         };
         const valueDisplay = createRedrawable(() => {
             const o = options.find((opt) => opt.value === value);
@@ -1056,10 +1076,32 @@ var __ktjs_mui__ = (function (exports) {
             return jsx("div", { class: "mui-select-display", children: inner });
         });
         const menu = createRedrawable(() => {
-            return (jsx("div", { class: "mui-select-menu", style: { display: 'none' }, children: options.map((option) => (jsx("div", { class: `mui-select-option ${option.value === value ? 'selected' : ''}`, "on:click": () => handleOptionClick(option.value), children: option.label }))) }));
+            return (jsx("div", { class: "mui-select-menu", style: "display: none;", children: options.map((option) => (jsx("div", { class: `mui-select-option ${option.value === value ? 'selected' : ''}`, "on:click": () => handleOptionClick(option.value), children: option.label }))) }));
         });
         // Create container
-        const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ?? ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: parseStyle(props.style), children: [label && jsx("label", { class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
+        const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ?? ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: parseStyle(props.style), children: [jsx("label", { "k-if": label, ref: selectLabelRef, class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
+        $defines(container, {
+            value: {
+                get: () => value,
+                set: (newValue) => {
+                    value = newValue;
+                    updateLabelState();
+                    valueDisplay.redraw();
+                    menu.redraw();
+                },
+            },
+            disabled: {
+                get: () => disabled,
+                set: (newDisabled) => {
+                    disabled = newDisabled;
+                    if (disabled) {
+                        isOpen = false;
+                        updateMenu();
+                    }
+                    container.classList.toggle('mui-select-disabled', disabled);
+                },
+            },
+        });
         // Add global click listener
         setTimeout(() => {
             document.removeEventListener('click', handleClickOutside);
@@ -1169,7 +1211,6 @@ var __ktjs_mui__ = (function (exports) {
     exports.Dialog = Dialog;
     exports.DownloadIcon = DownloadIcon;
     exports.ExpandMoreIcon = ExpandMoreIcon;
-    exports.FileOpen = FileOpenIcon;
     exports.FileOpenIcon = FileOpenIcon;
     exports.FolderOpenIcon = FolderOpenIcon;
     exports.FormLabel = FormLabel;