@ktjs/mui 0.19.0 → 0.20.2

package/dist/index.mjs

@@ -8,6 +8,7 @@ const $throw = (message) => {
 };
 
 // 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
@@ -43,10 +44,11 @@ const $append = // for ie 9/10/11
             $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) {
@@ -189,7 +191,14 @@ function applyContent(element, content) {
     }
 }
 
-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.
@@ -200,7 +209,7 @@ const svgTempWrapper = document.createElement('div');
  * ## 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!
@@ -211,15 +220,32 @@ const h = (tag, attr, content) => {
     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;
 };
 
@@ -228,21 +254,13 @@ const dummyRef = { value: null };
  * @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
@@ -252,7 +270,6 @@ function jsx(tag, props = {}) {
     else {
         el = h(tag, props, props.children);
     }
-    el.redraw ??= redraw;
     ref.value = el;
     return el;
 }
@@ -262,57 +279,16 @@ function jsx(tag, props = {}) {
  */
 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;
@@ -341,25 +317,54 @@ const generateHandler = (props, key) => {
 
 // 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();
@@ -367,7 +372,6 @@ function Button(props) {
         }
         // 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);
@@ -380,13 +384,21 @@ function Button(props) {
             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;
 }
 
 /**
@@ -427,7 +439,7 @@ function Checkbox(props) {
     // 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;
@@ -493,7 +505,7 @@ function CheckboxGroup(props) {
         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);
@@ -564,26 +576,28 @@ function Dialog(props) {
         }
         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;
@@ -614,10 +628,11 @@ function FormLabel(props) {
 }
 
 // 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');
 
@@ -626,7 +641,13 @@ class KTRef {
      * Indicates that this is a KTRef instance
      */
     isKT = true;
+    /**
+     * @internal
+     */
     _value;
+    /**
+     * @internal
+     */
     _onChanges;
     constructor(_value, _onChanges) {
         this._value = _value;
@@ -692,13 +713,12 @@ function ref(value, onChange) {
  */
 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;
 }
 
@@ -718,15 +738,17 @@ function LinearProgress(props) {
     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;
@@ -789,17 +811,27 @@ function TextField(props) {
         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;
@@ -815,7 +847,7 @@ function TextField(props) {
             },
             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();
             },
         },
@@ -903,7 +935,7 @@ function Radio(props) {
     // 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;
@@ -950,7 +982,7 @@ function RadioGroup(props) {
         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;
@@ -973,6 +1005,7 @@ function Select(props) {
     let isOpen = false;
     let isFocused = false;
     const selectRef = ref();
+    const selectLabelRef = ref();
     // Toggle dropdown
     const toggleMenu = () => {
         if (disabled) {
@@ -985,12 +1018,9 @@ function Select(props) {
     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) {
@@ -998,6 +1028,7 @@ function Select(props) {
                 }
             }, 200);
         }
+        menu.value.classList.toggle('mui-select-menu-open', isOpen);
         selectRef.value.classList.toggle('mui-select-open', isOpen);
     };
     // Handle option click
@@ -1007,11 +1038,8 @@ function Select(props) {
         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) => {
@@ -1031,15 +1059,7 @@ function Select(props) {
     };
     // 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);
@@ -1053,10 +1073,32 @@ function Select(props) {
         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);
@@ -1154,4 +1196,4 @@ function SelectAllIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z" }) }));
 }
 
-export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon as FileOpen, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
+export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/mui",
-  "version": "0.19.0",
+  "version": "0.20.2",
   "description": "Material-UI inspired components for kt.js - pre-styled UI components",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -35,8 +35,8 @@
     "directory": "packages/mui"
   },
   "dependencies": {
-    "@ktjs/shared": "0.19.0",
-    "@ktjs/core": "0.19.0"
+    "@ktjs/core": "0.20.3",
+    "@ktjs/shared": "0.20.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",