@mintjamsinc/ichigojs 0.1.62 → 0.1.64

package/dist/ichigo.cjs

@@ -7603,41 +7603,65 @@
          * Returns true when the target is a custom element and the binding should be
          * delivered as a property rather than an HTML attribute.
          *
-         * Two conditions trigger property delivery:
+         * Three conditions trigger property delivery:
          *  1. The value is an object or array — serialising these to a string attribute
          *     would lose type information.
          *  2. The element exposes a matching property accessor (e.g. a prop declared via
          *     defineComponent), even when the value is a primitive.
+         *  3. The element declares a matching prop in its static _props (case-insensitive
+         *     and kebab-case → camelCase tolerant), so primitive values reach the
+         *     reactive binding via the generated setter instead of being lost as a
+         *     plain HTML attribute that no attributeChangedCallback observes.
          */
         #isCustomElementProperty(element, name, value) {
             if (!element.tagName.includes('-')) {
                 return false;
             }
             const isObjectOrArray = Array.isArray(value) || (typeof value === 'object' && value !== null);
-            return isObjectOrArray || name in element;
+            if (isObjectOrArray || name in element) {
+                return true;
+            }
+            return this.#findDeclaredProp(element, name) !== undefined;
         }
         /**
          * Resolves the actual property name on a custom element for a given
          * (lowercased) HTML attribute name.  HTML attributes are always lowercase,
          * but custom element props are typically camelCase.  This method checks the
          * element's declared _props (set by defineComponent) for a case-insensitive
-         * match, falling back to scanning the prototype's own property descriptors.
+         * match against both the raw attribute name and its kebab-case → camelCase
+         * conversion (so `user-name` resolves to `userName`), falling back to the
+         * original name when no match is found.
          */
         #resolveCustomElementPropertyName(element, name) {
             // Fast path: exact match already exists
             if (name in element) {
                 return name;
             }
-            // Check declared _props from defineComponent / IchigoElement
+            return this.#findDeclaredProp(element, name) ?? name;
+        }
+        /**
+         * Looks up a declared prop on a custom element constructor whose name matches
+         * the given attribute name, treating the comparison as case-insensitive and
+         * tolerant of kebab-case → camelCase conversion.  Returns the canonical prop
+         * name (as declared) when a match is found, or undefined otherwise.
+         */
+        #findDeclaredProp(element, name) {
             const props = element.constructor._props;
-            if (Array.isArray(props)) {
-                const lowerName = name.toLowerCase();
-                const match = props.find(p => p.toLowerCase() === lowerName);
-                if (match) {
-                    return match;
-                }
+            if (!Array.isArray(props)) {
+                return undefined;
             }
-            return name;
+            const lowerName = name.toLowerCase();
+            const camelLower = this.#kebabToCamel(lowerName).toLowerCase();
+            return props.find(p => {
+                const lowerProp = p.toLowerCase();
+                return lowerProp === lowerName || lowerProp === camelLower;
+            });
+        }
+        /**
+         * Converts kebab-case to camelCase (e.g. `user-name` → `userName`).
+         */
+        #kebabToCamel(str) {
+            return str.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
         }
         /**
          * Checks if the attribute should be set as a DOM property.